React-tags: Perda de foco automático na entrada após a exclusão da tag

Criado em 6 mai. 2020  ·  10Comentários  ·  Fonte: i-like-robots/react-tags

Comportamento esperado

Espero um foco na entrada, mesmo depois de excluir uma tag

Comportamento atual

A entrada está perdendo o foco depois que excluo uma tag adicionada

Passos para reproduzir

Etapas para reproduzir o problema:

  1. digite um país
  2. selecione um país no menu suspenso
  3. exclua o país da tag
  4. entrada perde foco automático

Capturas de tela

1
2
3

Seu ambiente

  • SO: Windows 10.0
  • Navegador: Chrome [versão 81.0.4044.138 (versão oficial) (64 bits)]
  • Versão do componente: [5.12.1]
  • Versão React: [16.13.0]
bug

Todos 10 comentários

exclua o país da tag

Pressionando backspace quando a entrada está vazia ou clicando na tag?

desculpe, é pressionando o botão Fechar na tag. Quando eu excluo com backspace, o foco automático está lá

Obrigado pela informação extra @ekinalcar.

Como o elemento com foco está sendo destruído, presumo que o foco voltará para a janela ... não é o ideal! Suspeito que precisaremos registrar de onde o foco veio ao pousar na etiqueta e retorná-lo para lá quando removido.

Obrigado pela sua resposta rápida @ i-like-robots

No evento delete com backspace, mesmo se a entrada estiver vazia (sem tags), o foco está na mesma entrada em vez da janela

Olá @ekinalcar - Consegui recriar isso. Descobri que, com um mouse, o Firefox e o Safari funcionam consistentemente conforme o esperado, mas no Chrome o foco do cursor às vezes é perdido, mesmo que o evento de clique seja capturado.

No entanto, o foco é sempre perdido ao usar um teclado e "clicar" nas tags pressionando a barra de espaço, o que certamente não é o caso. Esperançosamente, corrigir isso também irá corrigir o problema intermitente no Chrome.

Existe alguma maneira de tornar isso opcional ? Tenho alguns comportamentos indesejados que são acionados ao excluir uma tag, então nem sempre quero que a entrada roube de volta o foco.

Você poderia descrever seu caso de uso @krozett ? Tenho certeza de que existem soluções melhores do que as que implementei atualmente, mas acho importante que o cursor vá para _algum lugar_ útil. Talvez eu pudesse adicionar uma condição que possibilitasse o reposicionamento do cursor no retorno de chamada handleDelete/onDelete .

@ i-like-robots Talvez fosse melhor se eu criasse um tíquete de solicitação de recurso para ele. Mas basicamente eu tenho um comportamento específico para dispositivos móveis, onde um usuário pressiona uma entrada e eu uso uma sobreposição para ocultar tudo, exceto essa entrada, para permitir espaço na tela para o teclado e sugestões de preenchimento automático. Quando nenhum elemento é focalizado, todo o formulário fica visível. Mas ao excluir uma tag, não quero que a entrada seja autofocada, pois é provável que o usuário só queira excluir a tag e não pretende continuar digitando na caixa de pesquisa. O foco automático faz com que a entrada volte ao modo de "dominação da tela", o que eu não quero. Apenas um foco intencional deve fazer isso.

Isso faz sentido @krozett - talvez uma solução melhor seja registrar de onde veio o foco (em focusin ) e retornar o cursor para lá quando a tag for removida 🤔

@ i-like-robots De qualquer forma, tenho certeza que a v6 está chegando, então talvez eu deva examinar o comportamento dela primeiro para ver se algum de seus manipuladores de eventos fará o que eu preciso. 😉

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

luciemac picture luciemac  ·  7Comentários

williamsidewalk picture williamsidewalk  ·  4Comentários

V6
i-like-robots picture i-like-robots  ·  11Comentários

yrik picture yrik  ·  10Comentários

thienanle picture thienanle  ·  9Comentários