How to properly organize autocomplite for input?

Question

css

Hello. Help solve the problem with closing the drop-down list (using autocomplete as an example)
In general, this is a simple input with autocomplite

Let's say I have the following html that implements the autocomplete function

<div class='container'>
       <input />
        <div class='list'>
            <div class='item' onClick = callback >{i.name}</div>
            <div class='item' onClick = callback >{i.name}</div>
            <div class='item' onClick = callbac k>{i.name}</div>
            <div class='item' onClick = callback >{i.name}</div>
            .....
        </div>
   </div>

The task of item `s is to perform a callback
when clicked . As usual, if we clicked on an element of the list, a callback is launched , but if we clicked on any other place on the web page (outside the element), the list should close. The question is, what event should be caught in order to close the list ?

After all, if you set the closing of the list list for the onBlur event of the input object , it will fire earlier than onClick when you click on the list element and, accordingly , onClick will not work
Maybe you need to change the structure of the component?

Answer 1

Wait, I didn't understand. Are you trying to reinvent your wheel ?