Puede encontrar los códigos y la caja aquí .

Tengo un componente que hace lo siguiente:

1. Mostrar un icono
2. Si se hace clic en el icono, entonces, en su lugar, muestra una entrada de búsqueda.
3. Si el usuario hace clic en cualquier lugar fuera de la entrada de búsqueda mientras se muestra, oculte la entrada de búsqueda y vuelva a mostrar el icono en su lugar.

El problema es que después de hacer clic en el ícono, la entrada de búsqueda se muestra y al hacer clic en cualquier lugar fuera de la entrada de búsqueda se muestra el ícono nuevamente. Pero si vuelve a hacer clic en el icono por segunda vez, la entrada de búsqueda no se muestra.

Intenté adjuntar una referencia al ícono y evaluar si el evento está contenido cuando se hace clic en el ícono, pero esa declaración condicional no ayudó. ¿Cómo puedo asegurarme de que cuando hago clic en el ícono para más veces, la entrada aparece nuevamente? ¡Gracias!

 import ReactDOM from "react-dom"; import "@elastic/eui/dist/eui_theme_amsterdam_light.css"; import React, { useEffect, useRef, useState } from "react"; import { EuiButtonIcon, EuiFieldText } from "@elastic/eui"; const App = () => { const [showSearch, setShowSearch] = useState(false); const searchInputRef = useRef(null); useEffect(() => { document.addEventListener( "click", (event) => handleClickOutside(event, showSearch), false ); }, [showSearch]); useEffect( () => () => { document.removeEventListener( "click", (event) => handleClickOutside(event, false), false ); }, [] ); const handleClickOutside = (event, showSearch) => { if ( searchInputRef.current && !searchInputRef.current.contains(event.target) && showSearch ) { setShowSearch(false); } }; if (showSearch) { return ( <EuiFieldText icon="search" placeholder="Sample Search Placeholder ..." inputRef={searchInputRef} /> ); } return ( <EuiButtonIcon aria-label="button" iconType="search" iconSize="xxl" onClick={() => setShowSearch(true)} /> ); }; export default App;