Tengo un caso extraño en el que tengo una lista de referencias de elementos de formulario que incluyen botones, diferentes tipos de entradas, etc. Luego creé un resumen de errores que, cuando se hace clic en él, se enfoca automáticamente y también se desplaza al elemento que necesita atención. Esto funciona perfectamente para input[type="text"] y para textareas, pero input[type="file"] y los botones (type button) no funcionan sin errores. Sin embargo, y esta es la parte extraña, si hago clic en un elemento de arriba y luego hacia abajo manualmente, enfoco el elemento. La función de enfoque vuelve a funcionar de nuevo.
Simplemente obtengo todas las referencias llamando a una función expuesta usandoimperialHandle. Las referencias se crean así: const fileInput = createRef<HTMLInputElement>(); y asignado al elemento de entrada. El código es muy simple, ¿es un problema conocido?
Gracias por adelantado.
EDITAR: Intenté replicar el error y obtuve el mismo problema con este código simple:
import React, { createRef } from 'react'; import logo from './logo.svg'; import './App.css'; function App() { const textRef = createRef<HTMLInputElement>(); const textAreaRef = createRef<HTMLTextAreaElement>(); const fileRef = createRef<HTMLInputElement>(); const buttonRef = createRef<HTMLButtonElement>(); return ( <div className="App"> <div> <input type="text" ref={textRef} /> </div> <div> <textarea ref={textAreaRef} ></textarea> </div> <div> <input type="file" ref={fileRef}/> </div> <div> <button ref={buttonRef}>Button</button> </div> Links: <div> <button onClick={() => { textRef.current?.focus(); }}>Text</button> </div> <div> <button onClick={() => { textAreaRef.current?.focus(); }}>TextArea</button> </div> <div> <button onClick={() => { fileRef.current?.focus(); }}>File</button> </div> <div> <button onClick={() => { buttonRef.current?.focus(); }}>Button</button> </div> </div> ); } export default App;Existe el mismo problema cuando se usa scrollTo.
EDIT 2: Intenté agregar preventDefault a las funciones onclick pero no tuvo ningún efecto. Navegar con el teclado y presionar los elementos usando espacio o enter parece funcionar perfectamente, pero no cuando se hace clic con el cursor.
Su ejemplo de código parece estar funcionando como debería.
Cuando hace clic en los botones de enfoque, el enfoque se mueve a la entrada adecuada. De forma predeterminada, el "anillo de enfoque" solo se muestra cuando el agente de usuario determina a través de la heurística que el enfoque debe hacerse evidente en el elemento. Obtendrá el "anillo de enfoque" en la entrada del file si navega hasta el botón de enfoque con su teclado y presiona Enter.
Puede usar la pseudo clase :focus para crear un indicador de estilo que será visible cada vez que se enfoca el objetivo. También debe leer sobre la pseudo clase:focus-visible ya que puede ayudarlo a comprender cómo funcionan los indicadores de enfoque de forma predeterminada.
El problema que enfrenta con scrollTo ocurre porque todo puede caber a la vista sin necesidad de desplazarse. Si agrega algo de altura a cada div alrededor de la entrada para que el documento sea más largo que la vista en su navegador, al llamar a scrollTo se desplazará a la entrada correcta.