Issue in Autocomplete inside custom element (web component) using React instant search

[gs-asohail]

We have an implementation of Algolia's React Instant search with Autocomplete. Also, we are converting our React component into a webcomponent (using @r2wc/react-to-web-component). The issue we are facing is when autocomplete panel is open and we click on any item, it closes the panel and does NOT update the search query input with the selected item.

Replicated the issue here: https://stackblitz.com/edit/react-jneg8s. Ignore the stylings, just search for something and click on the search result from the panel (using mouse click).

Root cause: Autocomplete applies some listeners (mouseDown, touchStart) and uses those events to identify if the click (or touch start) is outside of the panel. If so, it treats this as a blur event of autocomplete and closes the panel. This is completely fine, but in our case, because we are using web component (with shadow DOM), the event.target is always the custom element and not the internal target of the custom element. So this custom element is treated as outside click and thus closes the panel and doesn't even update the search input state.

[Haroenv]

Does it work if you patch target to currentTarget?

[gs-asohail]

The listeners are internal to autocomplete. We don't have control over it.

[Haroenv]

Yes, sorry for being unclear, but I meant patching node_modules using patch-package, or creating a pull request here, so that you can try out a few different solutions

[gs-asohail]

Sorry, I am unable to understand what you mean by patching. Do you mean do event.currentTarget = event.target? Doing so gives this error: Uncaught TypeError: Cannot set property target of #<Event> which has only a getter