Vaadin-combo-box: Clicar no botão de alternância deve focar a entrada

@ mas4ivv você pode reproduzir o problema com esta demonstração?
https://jazzy-pedestrian.glitch.me

O código está aqui (pressione "Remix Project" no menu para fazer alterações):
https://glitch.com/edit/#!/jazzy -pedestrian? path = index.html

Atualmente, ao executar as etapas acima, posso focar a caixa de combinação clicando no botão de alternância.
Tem certeza de que está usando a versão mais recente do componente?

Posso reproduzir o problema com o link que você forneceu usando o Firefox 60.6.1esr (o único navegador que posso usar no momento). Quando foco o campo de texto e clico no botão de alternância, o pop-up é aberto, mas o foco permanece dentro do campo de texto. Todas as entradas feitas pelo teclado vão para o campo de texto.

Como solução alternativa, incluí um ouvinte de cliques na caixa de combinação:
this. $. toggleButton.addEventListener ("click", function (e) {
que. $. input.focusElement.select ();
});

Acabei de testar isso no Firefox 60.7.0esr (64 bits) no macOS e não consigo reproduzi-lo. @ mas4ivv, você pode atualizar sua versão do Firefox ESR para a versão 60.7.0esr mais recente e tentar novamente?

Eu também baixei a versão específica do Firefox 60.6.1esr ( daqui ) e não consigo reproduzir o problema mesmo com ela (pelo menos no macOS).

@ mas4ivv Você tem algum complemento habilitado no Firefox? Em caso afirmativo, você poderia tentar desativar todos os complementos para verificar se eles não causam o problema? Ou talvez tente (modo privado).

Eu também instalei o Firefox 60.6.1esr em um Windows 10 (64 bits) em uma máquina virtual e lá também parece funcionar (não é possível reproduzir o problema).

No momento, só posso usar a versão do Firefox que mencionei (tentarei em casa com um Firefox mais recente), mas tentei o mesmo no meu celular com o Chrome e obtive o mesmo resultado. Você clicou exatamente no botão de alternância? Ao clicar em qualquer outro lugar na caixa de combinação, o comportamento é o esperado.

Sim, certifiquei-me de clicar diretamente no ícone do botão de alternância, mas também testei clicar em outro lugar.

Agora que você mencionou o Chrome para dispositivos móveis, também testei com o Chrome no Android e aí posso ver o problema.

@ mas4ivv Qual sistema operacional você está usando no desktop (Win, Linux, macOS)?

Firefox no Windows 7, Chrome no Android.

@ mas4ivv Você está usando uma tela de toque no Windows 7?

Acabei de notar que posso reproduzir isso facilmente no Chrome e no Firefox mais recente, mesmo no macOS, se eu abrir as ferramentas de desenvolvimento e habilitar a simulação de dispositivo móvel selecionando um dispositivo específico no modo de design responsivo.

Acho que o problema provavelmente está relacionado a eventos de toque. Pelo menos agora é mais fácil depurar após essa realização.

Também reproduzível no Chrome sem modo responsivo (barra de ferramentas do dispositivo), selecionando "Touch: Force enabled" na guia "Sensors" nas ferramentas de desenvolvimento.

Na verdade, parece que este é um recurso que foi implementado especificamente para evitar a abertura do teclado virtual em dispositivos de toque (ao clicar no botão de alternância), a menos que o usuário clique / toque explicitamente na parte de entrada.

https://github.com/vaadin/vaadin-combo-box/blob/master/src/vaadin-combo-box-mixin.html#L331

// For touch devices, we don't want to popup virtual keyboard on touch devices unless input
// is explicitly focused by the user.
if (!this.$.overlay.touchDevice) { //...

Esta parte focaliza apenas a entrada (ao clicar no botão de alternância) se não for um dispositivo habilitado para toque.

Provavelmente precisamos repensar como isso deve funcionar.

Ajudaria se fosse possível detectar de alguma forma que o dispositivo está habilitado para toque, mas não tem um teclado virtual (como em dispositivos móveis por padrão). Ou se pudermos detectar que não é um "dispositivo móvel", mas tem o toque ativado. Não tenho certeza de qual seria a melhor lógica para que isso funcione bem na maioria dos casos. Isso pode ficar um pouco complexo considerando laptops com telas sensíveis ao toque ou outros dispositivos "híbridos".

Uma possibilidade seria verificar as dimensões da janela de visualização e se a janela de visualização for grande o suficiente (presumindo que não seja um telefone celular onde um teclado virtual ocupa uma quantidade considerável de espaço na tela), então pode ser bom fazê-lo focar a entrada mesmo em um dispositivo de toque.

Ou, alternativamente, poderíamos apenas fazer com que ele verifique se a raiz pai da caixa de combinação tem algum outro elemento focado em vez da caixa de combinação e pelo menos desfocar esse elemento (se não estiver focalizando a entrada da caixa de combinação). Isso pode ser bom o suficiente. Pelo menos parece estranho deixar o foco em algum elemento externo, então isso resolveria o problema.

@ mas4ivv Considerando o acima, seria bom o suficiente para você se neste caso (em dispositivos de toque)

@Haprog : Sim, ambas as sugestões seriam adequadas para nós. E vendo seu código, entendo que minha próxima tarefa é descobrir por que nossos desktops pensam que são dispositivos de toque ...

Eu pelo menos testei isso uma vez em uma VM nova com Win 7 (32 bits) executando a mesma versão do Firefox 60 ESR, mas não reproduziu lá, então pelo menos por padrão, mesmo aquela combinação de navegador OS + não deveria ter o toque habilitado. Talvez algo em seu sistema operacional ou nas configurações do navegador. Se você modificou as configurações de FF, talvez haja alguma parte que force os eventos de toque. Mas acho que também pode ser causado por algumas configurações do Windows.

@ mas4ivv Uma correção para isso foi implementada para que em dispositivos habilitados para toque desfoque o elemento previamente focalizado (se houver um) ao clicar no botão de alternância.

A correção foi lançada com vaadin-combo-box v5.0.4 .

O WebJar para esta versão está sendo publicado e deve estar disponível no Maven Central em breve (para API Java).

Sim, ambas as sugestões seriam adequadas para nós. E vendo seu código, entendo que minha próxima tarefa é descobrir por que nossos desktops pensam que são dispositivos de toque ...

A propósito, acho que li em algum lugar que no Windows algum outro software poderia instalar um dispositivo de toque virtual, o que faria os navegadores pensarem que o computador está habilitado para toque. Isso é o que pode estar acontecendo se você estiver executando algum software especial que precisa de um dispositivo de toque virtual por qualquer motivo.