<p>vaadin-combo-box quando colocado dentro do paper-dialog está fechando o diálogo em alguns casos.</p>

Criado em 21 fev. 2017 · 19Comentários · Fonte: vaadin/vaadin-combo-box

Descrição

Quando o elemento vaadin-combo-box é colocado dentro da caixa de diálogo do papel, se o usuário abre a caixa para seleção (mas não seleciona, apenas a deixa aberta), clique em qualquer lugar na caixa de diálogo para fechar a caixa de diálogo.

Resultado esperado

Clique em qualquer lugar na caixa de diálogo (p. canto superior esquerdo) deve fechar a caixa, mas deixar a caixa de diálogo aberta.

Resultado real

Clicar em qualquer lugar na caixa de diálogo fecha a caixa de diálogo inteira.

Demonstração ao vivo

https://jsfiddle.net/ribe/02tntfn3/2/

Passos para reproduzir

Abra a caixa de diálogo,
abra a caixa e não selecione - deixe-a aberta,
3.Clique no canto superior esquerdo da caixa de diálogo.

Fonte

GoceRibeski

Comentários muito úteis

Para sua informação, isso também acontece se você selecionar um item na caixa de combinação usando o mouse ...

kito99 em 2 mar. 2017

👍7

Todos 19 comentários

Existe uma espécie de bug com a propagação de eventos. Por exemplo. fechar vaadin-combo-box pressionando Esc também fecha a caixa de diálogo. Nesses casos, costumo usar algo como on-keydown="_stopPropagation" e depois adicionar o manipulador assim:

_stopPropafation: function (e) {
  e.stopPropagation()
}

Há também uma propriedade stopKeyboardEventPropagation fornecida por IronA11yKeysBehavior , mas esse comportamento não é implementado por vaadin-combo-box e essa propriedade parece não funcionar para alguns outros elementos, parece que lida com eventos muito tarde.

web-padawan em 21 fev. 2017

Não consigo encontrar onde colocar o evento que chamará stopPropagation em determinado Fiddle. Qualquer ideia?

GoceRibeski em 21 fev. 2017

Olá!

O desafio aqui é que a sobreposição de <vaadin-combo-box> é colocada sob <body> , que está fora de <paper-dialog> , de modo que considera quaisquer cliques na sobreposição da caixa de combinação como "cliques externos ", que por padrão fecha a caixa de diálogo.

Como solução alternativa, você pode desativar os cliques externos quando a caixa de combinação estiver aberta:

...
<vaadin-combo-box id="third" label="Focus Third" tabindex="3" on-focus="_focusInput" items="[[items]]" on-blur="_onBlur" on-opened-changed="_onComboBoxOpened">
        </vaadin-combo-box>

<script>
...
_onComboBoxOpened: function(e) {
  if (e.detail.value) {
    this.$.add_row_details_dialog.noCancelOnOutsideClick = true;
  } else {
    this.async(function() {
      this.$.add_row_details_dialog.noCancelOnOutsideClick = false;
    }, 10);
  }
}
...
</script>

Saulis em 1 mar. 2017

@Saulis , sua abordagem não funcionou para mim, infelizmente. No entanto, acabei de definir a propriedade noCancelOnOutsideClick como true na caixa de diálogo do papel, e isso corrige o problema (não havia necessidade de fechar a caixa de diálogo quando você clica fora dela, neste caso).

kito99 em 2 mar. 2017

👍1

Para sua informação, isso também acontece se você selecionar um item na caixa de combinação usando o mouse ...

kito99 em 2 mar. 2017

👍7

Aplique 'no-cancel-on-outside-click' ao elemento de diálogo de papel. Isso impedirá que a caixa de diálogo seja fechada quando você selecionou o elemento na caixa de combinação vaadin por meio de um clique do mouse ou do teclado.

<paper-dialog no-cancel-on-outside-click> <vaadin-combo-box class="elements-box" items="[[arrayOfValues]]"></vaadin-combo-box> </paper-dialog>

artem-vladimirov em 17 mar. 2017

👍1

A solução alternativa de @kito99 / @artem-vladimirov com no-cancel-on-outside-click não é adequada em geral ou para mim, pois quero que o usuário possa fechar a caixa de diálogo com um clique externo. (Mas posso confirmar que funciona se isso não for um requisito).

Outra solução (semelhante) é ouvir o evento iron-overlay-canceled e chamar event.stopPropagation() e event.preventDefault() , mas isso tem o mesmo problema que a outra solução alternativa - impede o fechamento da caixa de diálogo em um clique de fundo.

Eu tentei diferenciar os dois eventos um do outro, mas sem sorte até agora.

Posso confirmar a observação de @kito99 de que apenas selecionar um item fecha a caixa de diálogo, assim como cancelar a seleção clicando na caixa de diálogo do papel.

EDITAR:

Eu vim com a seguinte solução alternativa:

        listeners: {
          "iron-overlay-canceled": "onCanceled",
        },
        onCanceled(event) {
            const paperDialogHoverElement = document.querySelector("paper-dialog:hover");
            const vaadinHoverElement = document.querySelector("vaadin-combo-box-overlay:hover");
            if (paperDialogHoverElement || vaadinHoverElement) {
                event.stopPropagation();
                event.preventDefault();
            }
        }

Resumindo, o evento só é cancelado se o cursor estiver no papel-diálogo ou no elemento de sobreposição. Com essa solução alternativa, posso selecionar valores suspensos, fechar a caixa de diálogo com um clique externo e também fechar a caixa de diálogo com o botão de escape. Testado no Chrome e Firefox.

panuhorsmalahti em 3 abr. 2017

Há algo a fazer aqui além de esperar uma nova versão? solução oficial vaadin?

timoteoponce em 10 mai. 2017

Não tenho certeza por que eu perdi completamente esse problema por tanto tempo. Este é um problema de usabilidade realmente fundamental e deve ser corrigido o mais rápido possível. Vou ver se consigo inspirar @Saulis ou outra pessoa da equipe de desenvolvimento a dar uma olhada nesta ou na próxima semana.

jouni em 10 mai. 2017

👍1

Ei pessoal, por favor, tentem o branch iron-overlay-cancel (infelizmente ele é construído em cima do master atual, então pode haver alguns conflitos de dependência por ser híbrido – resolva deps para 2.0-preview , e Polymer para o que você quiser quer)

Eu também escolhi a mudança no topo do ramo 1.x ( iron-overlay-cancel-v1 ), mas atualmente não posso verificar se está funcionando, pois não quero estragar minha configuração do Bower do Polymer 2: -)

Atualização: esta correção provavelmente funciona apenas em iron-overlay-behavior v1.10.3 ou posterior.

Saulis em 10 mai. 2017

@GoceRibeski @web-padawan @kito99 @artem-vladimirov @panuhorsmalahti @timoteoponce alguém tem a chance de experimentar a solução? Obrigado!

Saulis em 12 jun. 2017

@Saulis Obrigado por lembrar. Acabei de pegar o branch iron-overlay-cancel-v1 e vejo o aviso:

[vaadin-combo-box::_createEventHandler]: listener method `_onBlur` not defined

Então, depois de ter paper-dialog e vaadin-combo-box internos abertos, tentei duas coisas:

Ao pressionar a tecla Esc, a caixa de diálogo é fechada enquanto a sobreposição da caixa de combinação permanece aberta,
Ao selecionar o item, a caixa de diálogo e a caixa de combinação são fechadas.

Não tenho muito tempo para investigar agora, mas acho que a falta de um ouvinte pode ser o motivo.

web-padawan em 12 jun. 2017

@web-padawan obrigado! não precisa se preocupar com a falta de _onBlur , é um ouvinte que foi removido intencionalmente, mas acidentalmente deixou a ligação do ouvinte no lugar. Eu preciso testar novamente esses problemas que você relatou, eu não testei a ramificação v1.

Saulis em 12 jun. 2017

@web-padawan Posso confirmar que a correção funciona para mim tanto em iron-overlay-cancel com Polymer 2.xe iron-overlay-cancel-v1 Polymer 1.9.1 - verifique se você tem iron-overlay-behavior v1.10.3 ou posterior instalado (estou executando 2.0.0 )

Saulis em 12 jun. 2017

@Saulis Não funciona para mim. Na verdade eu até tenho um bug estranho que não está presente no 2.0a4. Todo o texto do meu modelo desaparece

Estou executando o Polymer 2 com iron-overlay-behavior#2.0.0

Aqui está 2.0.0-alpha4 : http://www.giphy.com/gifs/3ohzdQKeVtoswDSpfW
Aqui está o ramo iron-overlay-cancel : http://www.giphy.com/gifs/3o7btZ3T0yMwKkG6fm

arkihillel em 12 jun. 2017

@arkihillel Eu rebase iron-overlay-cancel em cima de master , você pode tentar novamente? E certifique-se de reinstalar todos os deps do bower.

Saulis em 12 jun. 2017

Parece funcionar para mim.
Usando: vaadin-combo-box#iron-overlay-cancel, polímero#2.0.1, iron-overlay-behavior#2.0.0

Aliás, não é grande coisa, mas você pode ter cometido um erro de digitação com _removeOutsideTabListener , ou seja, Tab vs Tap ;)

jonagh em 12 jun. 2017

@Saulis Funciona agora!
Desculpem a edição, pensei ter descoberto um bug estranho mas foi um erro meu

arkihillel em 13 jun. 2017

👍1

Já existe uma solução estável?
Quando um Item é selecionado usando o mouse, o evento (selectedItemChange) é acionado duas vezes; o primeiro com o novo Item selecionado e o segundo com o anterior (impossível alterar a seleção).
Obrigado.