Elements behind detached overlay cancel button get clicked as well

[ArcoMul]

Description

I'm noticing that when the cancel button of detached overlay is clicked, that elements behind the overlay are also being clicked.

Reproduction

Here is a sandbox showing the problem: https://eqkl7.csb.app/

Steps

1. Open the sandbox in a new window
2. Open the browser devtools to emulate mobile touches (only Firefox seems to emulate touches the right way)
3. Click the input field to open the detached overlay view
4. Click the cancel button in such a way that you also click on the 'Search' button behind
5. Notice that after clicking the cancel button it says 'Search button got clicked' in the console

Expected behavior

I expect the detached overlay to close when clicking 'cancel' but not to be any other element behind it being clicked.

Environment

• OS: Windows
• Browser: Desktop Firefox (using devtools), Mobile Firefox, Mobile Chrome (note: not able to reproduce using desktop Chrome devtools)
• Autocomplete version: 1.5.1

[ArcoMul]

Some interesting finds:

• This doesn't happen when debug mode is true
• I think it goes wrong because the formElement variable on this line: https://github.com/algolia/autocomplete/blob/next/packages/autocomplete-core/src/getPropGetters.ts#L56 doesn't contain the cancel button as a child node, and thus does the current implementation thinks that the user is clicking outside of the detached overlay

[sarahdayan]

I'm reproducing the issue on Firefox with touch gestures enabled (event occurs with a slight delay). The behavior not happening on debug mode is likely caused by the blur state action having a special case for it (related issue).

I will investigate.

[francoischalifour]

That's indeed because the input loses focus. We could either prevent touch events on the panel elements, or not attach this blur logic on the input in Detached mode.

[prestarocket]

Does anyone have a solution for this bug?

[francoischalifour]

Another thing to try is to preventDefault and stopPropagation on the cancel button click:

autocomplete/packages/autocomplete-js/src/createAutocompleteDom.ts

Lines 171 to 174 in 83b5a31

	onClick() {
	autocomplete.setIsOpen(false);
	setIsModalOpen(false);
	},

Would you like to PR @prestarocket?