Input text with popover or child element. Reactjs (no bootstrap) - reactjs

Question

I have a search input and showing the result like popover on bottom.
https://prnt.sc/sg11m9
const AutoComplete = connectAutoComplete(
({ hits, currentRefinement, refine }) => {
const [focus, isFocus] = useState(false);
return(
<div>
<input
type="search"
placeholder="Search movies"
value={currentRefinement}
onChange={event => refine(event.currentTarget.value)}
onFocus={() => isFocus(true)}
onBlur={() => isFocus(false)}
/>
{
focus && currentRefinement ?
( <><ul onMouseOver={() => isFocus(true)} >
{hits.map(hit => (
<li key={hit.objectID}>
<Link to={`/movies/${hit.slug}`}><Highlight tagName="mark" hit={hit} attribute="title" /></Link>
</li>
))}
</ul>
<CustomStateResults /></>
) : ''
}
</div>
)
}
);
I set a state for onFocus and onBlur attribute,so that the popover shows when if its in focus and hide when its onBlur.
but my problem is, I have a link on popover, If I click the link it triggers the onBlur, so technically the popover hides and doesnt go to link.
How can I click on the links inside wihtout triggering the onblur and I also need to hide the popover when you click anywhere the DOM or if youre not onfocus on textbox?

Answer 1

I just solved it!
the onBlur function is not good.
It should be, when you click outside the component that will trigger the setstate value of focus into false.
heres the code
function useOnClickOutside(ref, handler) {
useEffect(
() => {
const listener = event => {
if (!ref.current || ref.current.contains(event.target)) {
return;
}
handler(event);
};
document.addEventListener('mousedown', listener);
document.addEventListener('touchstart', listener);
return () => {
document.removeEventListener('mousedown', listener);
document.removeEventListener('touchstart', listener);
};
},
[ref, handler]
);
}
const AutoComplete = connectAutoComplete(
({ hits, currentRefinement, refine }) => {
const [focus, isFocus] = useState(false);
const ref = useRef();
useOnClickOutside(ref, () => isFocus(false));
return(
<div>
<input
type="search"
placeholder="Search movies"
value={currentRefinement}
onChange={event => refine(event.currentTarget.value)}
onFocus={() => isFocus(true)}
/>
{
focus && currentRefinement ?
( <><ul ref={ref}>
{hits.map(hit => (
<li key={hit.objectID}>
<Link to={`/movies/${hit.slug}`}><Highlight tagName="mark" hit={hit} attribute="title" /></Link>
</li>
))}
</ul>
<CustomStateResults /></>
) : ''
}
</div>
)
}
);
Suggestions and tips are still welcome. Thanks!