We don’t support multiple instances of Autocomplete in the same page, as only one of them can attach mouse/pointer events to the document.
As an alternative to having 2 instances of Autocomplete, you can retrieve the viewport size when the document is loaded and conditionally instantiate either the mobile or the desktop version.
If there’s a need to dynamically change the target, you can rely on window.matchMedia()
and destroy/recreate Autocomplete in its change
event.
If you need 2 instances at the same time, you can explicitly tell all the Autocomplete instances to close when a click happens outside of them, like this:
const autocomplete1 = autocomplete({ /* ... */ });
const autocomplete2 = autocomplete({ /* ... */ });
document.addEventListener('click', (event) => {
const clickInsideAutocomplete = event.target.closest('.aa-Autocomplete');
if (!clickInsideAutocomplete) {
autocomplete1.setIsOpen(false);
autocomplete2.setIsOpen(false);
}
});
Note that this won’t work in some cases, for example with Shadow DOM, in IE11, etc. You might need to adapt this snippet to your specific requirements.