React-tags: Perder el enfoque automático en la entrada después de eliminar la etiqueta

Creado en 6 may. 2020  ·  10Comentarios  ·  Fuente: i-like-robots/react-tags

Comportamiento esperado

Espero un enfoque en la entrada incluso después de eliminar una etiqueta

Comportamiento actual

La entrada pierde el foco después de eliminar una etiqueta agregada

Pasos para reproducir

Pasos para reproducir el problema:

  1. escriba un país
  2. seleccione un país del menú desplegable
  3. eliminar el país de la etiqueta
  4. la entrada pierde el enfoque automático

Capturas de pantalla

1
2
3

Tu entorno

  • SO: Windows 10.0
  • Navegador: Chrome [versión 81.0.4044.138 (compilación oficial) (64 bits)]
  • Versión del componente: [5.12.1]
  • Versión de reacción: [16.13.0]
bug

Todos 10 comentarios

eliminar el país de la etiqueta

¿Pulsando la tecla de retroceso cuando la entrada está vacía o haciendo clic en la etiqueta?

lo siento, es presionando el botón cerrar en la etiqueta. Cuando lo elimino con retroceso, el enfoque automático está ahí

Gracias por la información extra @ekinalcar.

Debido a que el elemento con el foco se está destruyendo, supongo que el foco volverá a la ventana de forma predeterminada ... ¡no es lo ideal! Sospecho que necesitaremos registrar de dónde vino el enfoque al aterrizar en la etiqueta y devolverlo allí cuando se retire.

Gracias por su rápida respuesta @ i-like-robots

En el evento de eliminación con retroceso, incluso si la entrada está vacía (sin etiquetas), el foco está en la misma entrada en lugar de en la ventana

Hola @ekinalcar : he podido recrear esto. Descubrí que con un mouse, tanto Firefox como Safari funcionan de manera consistente como se esperaba, pero en Chrome, el foco del cursor a veces se pierde, a pesar de que se captura el evento de clic.

Sin embargo, el enfoque siempre se pierde cuando se usa un teclado y se hace "clic" en las etiquetas al presionar la barra espaciadora, lo que ciertamente no está previsto. Con suerte, solucionar esto también solucionará el problema intermitente en Chrome.

¿Hay alguna forma de que podamos hacer esto opcional ? Tengo un comportamiento no deseado que se desencadena al eliminar una etiqueta, por lo que no siempre quiero que la entrada recupere el foco.

¿Podría describir su caso de uso @krozett ? Estoy seguro de que hay mejores soluciones que las que he implementado actualmente, pero creo que es importante que el cursor vaya _en algún lugar_ útil. Quizás podría agregar una condición que permitiría reposicionar el cursor en la devolución handleDelete/onDelete llamada

@ i-like-robots Tal vez sería mejor si creara un ticket de solicitud de función para ello. Pero básicamente tengo un comportamiento específico para dispositivos móviles, donde un usuario presiona una entrada y uso una superposición para ocultar todo menos esa entrada, para permitir espacio en la pantalla para el teclado y autocompletar sugerencias. Cuando no se enfoca ningún elemento, todo el formulario es visible. Pero al eliminar una etiqueta, no quiero que la entrada se enfoque automáticamente, ya que es probable que el usuario solo quisiera eliminar la etiqueta y no tenga la intención de seguir escribiendo en el cuadro de búsqueda. El enfoque automático hace que la entrada vuelva al modo de "dominación de pantalla", que no quiero. Solo un enfoque intencional debería hacer esto.

Eso tiene sentido @krozett ; quizás una mejor solución sería registrar de dónde vino el enfoque (en focusin ) y devolver el cursor allí cuando se elimine la etiqueta 🤔

@ i-like-robots En cualquier caso, estoy seguro de que la v6 llegará pronto, así que tal vez debería ver el comportamiento de eso primero para ver si alguno de sus controladores de eventos hará lo que necesito. 😉

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

V6
i-like-robots picture i-like-robots  ·  11Comentarios

yrik picture yrik  ·  10Comentarios

filippofilip95 picture filippofilip95  ·  4Comentarios

thienanle picture thienanle  ·  9Comentarios

jraack picture jraack  ·  6Comentarios