Autocomplete panel does not close on tap (touch devices) outside panel

The autocomplete Panel does not close when tapping outside the panel. This issue is reproducable for ios (safari) and android (chrome) devices.
Click Events in non touch devices (desktop) outside the panel however behave like expected and the panel blurs. The autocomplete state also changes its isOpen attribute to false.
In touch devices the state does not change its isOpen attribute when tapping outside the panel.
The implementation follows your guide Creating a Custom Renderer | Autocomplete | Algolia

We use the current version 1.5.2 of @algolia/autocomplete-js. my analysis has shown that there have already been similar issues in the recent past, which were fixed, like:

Is this a common issue, that you are already aware of? Do you have any idea what could cause this issue looking at the code?

I could not post my code in this platform, because it threw a 403 error, when saving the post with the code block. Is there any qay how i could post my code with this posting

Have now come up with a solution for publishing code.

You can access the code via

Code is not runnable. It is just pasted to the Codesandbox as a fallback to post the code with this question

New insights into the bug in algolia’s autocomplete-js library.
The comments in the source code of the library indicate that the blurring of the input field is not based on the panel’s native blur event, but rather on a custom touchstart event outside of the autocomplete elements.

In the documentation Creating a Custom Renderer | Autocomplete | Algolia, however, this method is not described as required for touch devices, but as optional if you wnt to achieve a native scroll experience for customers on touch devices.

Unfortunately, a test with the library’s custom “touchstart” events was not successful either. These findings were also added to the algolia ticket. So this bug could not be fixed by adding the custom eventhandlers, the getEnvironmentProps method returns, according to your documentaion at Creating a Custom Renderer | Autocomplete | Algolia

Noone there @algolia, who can assist with this issue ?

+1, I am also having issues getting the panel to close on touching outside with react 18

1 Like