Not working when input targetted is "display: none"

[Hui Yang]

System Information

• latest chrome is used, in Windows 11
• cdn is used, (both css and js)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tarekraafat-autocomplete.js/10.2.7/css/autoComplete.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tarekraafat-autocomplete.js/10.2.7/autoComplete.min.js"></script>

• no any error message, nothing happened.

Describe the bug
autocomplete.js instant not working when it is display: none, it work after display: none is removed.

To Reproduce
Steps to reproduce the behavior:

1. Use the following config
2. Create a input text field with ID "search-input"
3. Add the following css

#search-input {
display: none;
}

5. When user type on the text field, console should output the query typed, but it don't, nothing happened

Expected behavior
Autocomplete instant should work, when user type on the text field, console should output the query typed.

Configuration used

{
    	selector: "#search-input",
        debounce: 500, // Milliseconds value
        
        //placeHolder: "Search for Food...",
        data: {
	        src: async (query) => {
		        console.log('q', query)
		        try {
			        // Fetch Data from external Source
			        const source = await fetch(autoCompleteUrl + '?q=' + query);
			        // Data should be an array of `Objects` or `Strings`
			        const data = await source.json();
			        return data.records.data;
		        } catch (error) {
			        return error;
		        }
	        },
	        // Data source 'Object' key to be searched
	        keys: ["name"]
        }
}

[Hui Yang]

Sorry my mistake. It is actually caused by 2 element with same ID.

BTW, hope that the selector can select multiple elements when class selector is applied.