algolia / algolia/autocomplete
Issue in Autocomplete inside custom element (web component) using React instant search
- Dominant language
- TypeScript
- Stars
- 5.3k
- Forks
- 341
- Avg merge
- 3d 1h
- Merged PRs (30d)
- 5
Description
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.
Contributor guide
Research direction
Start with the linked StackBlitz reproduction and the Autocomplete event-handling path described in the issue, focusing on mouseDown and touchStart outside-panel detection under shadow DOM. Confirm that selecting a panel item updates the search query in the React web-component setup and preserves the intended panel behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, search
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100