La razón por la que quiero hacer esto es porque hay un comportamiento de estilo no deseado cuando hago clic en una entrada ya enfocada. Prefiero que solo se aplique cuando lo enfoque por primera vez.

Tengo un useRef básico que contiene mi inputEl, y lo quiero para que al hacer clic en el ícono (que es un hermano) al lado del elemento de entrada, se enfocará el campo relevante, pero solo si aún no está enfocado (si ya está enfocado, no debería hacer nada).

Así que traté de poner lo siguiente enHaga clic en el elemento Icono.

 onClick={() => { if (document.activeElement !== inputEl.current) { inputEl.current.focus(); } }}

Esta condición no funciona porque cada vez que se hace un clic, el elemento activo se borra y se establece de forma predeterminada en el cuerpo, por lo que la verificación falla y me enfoco de nuevo. No estoy 100% seguro de por qué sucede eso. Para algún contexto, el proyecto es iniciado por CRA y el ícono con este onClick es un ícono de Font Awesome React. No hay nada notable sobre el elemento de entrada, excepto que tiene una propiedad ref de inputEl. Como estoy usando useRef, probablemente lo haya adivinado, pero esto está dentro de un componente funcional.

Probablemente pueda pensar en algunas formas bastante complicadas de resolver este problema, pero lo diferiré hasta que obtenga una respuesta para ver si hay una forma más limpia. Estaba pensando en establecer algún valor de estado después de enfocar, usarlo en la verificación y usar un efecto de uso para devolver el valor de estado a nulo cuando el elemento se desenfoca o algo así. ¿Es una buena idea? ¿Hay un método más simple que me estoy perdiendo?

Editar: Creo que expresé mal el problema. Lo que estoy tratando de resolver es el problema de que cada vez que hago clic en el ícono, el campo se desenfoca brevemente antes de volver a enfocarlo, lo que hace que mis transiciones de enfoque ocurran con cada clic.