Así que tengo un div y dentro de ese div tengo dos campos de entrada, como:
<div> <input placeholder="Input1"/> <input placeholder="Input2"/> </div>Quería llamar a cierta función cada vez que el usuario hace clic fuera de ese div (no de los campos de entrada).
Así que adjunté el evento onBlur para ese div en particular, dándole un tabIndex.
<div tabIndex="1" onClick={handleClick} onBlur={handleOnBlur}>Pero ahora el evento onBlur se activa cada vez que me muevo de un campo de entrada a otro campo de entrada que reside en el mismo div.
No podía entender por qué sucede esto. Además, ¿hay algún enfoque mejor para lograr este tipo de funcionalidad?
Enlace de Codesandbox para jugar : https://codesandbox.io/s/tender-carson-9rkj13
Al pasar el event como un parámetro a su función handleOnBlur , puede hacer uso de las propiedades currentTarget y relatedTarget , y descartar eventos en los que relatedTarget ( <input> ) es un elemento secundario de currentTarget ( <div> ).
Por ejemplo:
const handleOnBlur = (event) => { if (event.currentTarget.contains(event.relatedTarget)) { return; } console.log("On blur for div called, setting false"); setShowBtn(false); };