Not working when input targetted is "display: none"

[huiyang]

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

4. #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"]
        }
}

[huiyang]

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.