Skip to content

Commit

Permalink
Fix Combobox autoSelect with virtualized list on mobile (#3812)
Browse files Browse the repository at this point in the history
Closes #3808

I tried to write a test for it, but Playwright doesn't seem to support
scroll on touch move yet (related:
microsoft/playwright#2903).
  • Loading branch information
diegohaz committed May 23, 2024
1 parent 984ca50 commit b72ecc7
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 3 deletions.
6 changes: 6 additions & 0 deletions .changeset/3812-combobox-auto-select-touch-move.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@ariakit/react-core": patch
"@ariakit/react": patch
---

Fixed [`autoSelect`](https://ariakit.org/reference/combobox#autoselect) behavior with virtualized lists on mobile devices.
8 changes: 5 additions & 3 deletions packages/ariakit-react-core/src/combobox/combobox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -306,7 +306,7 @@ export const useCombobox = createHook<TagName, ComboboxOptions>(
const scrollingElement = getScrollingElement(contentElement);
if (!scrollingElement) return;
scrollingElementRef.current = scrollingElement;
const onWheel = () => {
const onUserScroll = () => {
// A wheel event is always initiated by the user, so we can disable the
// autoSelect behavior without any additional checks.
canAutoSelectRef.current = false;
Expand All @@ -322,10 +322,12 @@ export const useCombobox = createHook<TagName, ComboboxOptions>(
canAutoSelectRef.current = false;
};
const options = { passive: true, capture: true };
scrollingElement.addEventListener("wheel", onWheel, options);
scrollingElement.addEventListener("wheel", onUserScroll, options);
scrollingElement.addEventListener("touchmove", onUserScroll, options);
scrollingElement.addEventListener("scroll", onScroll, options);
return () => {
scrollingElement.removeEventListener("wheel", onWheel, true);
scrollingElement.removeEventListener("wheel", onUserScroll, true);
scrollingElement.removeEventListener("touchmove", onUserScroll, true);
scrollingElement.removeEventListener("scroll", onScroll, true);
};
}, [open, contentElement, store]);
Expand Down

0 comments on commit b72ecc7

Please sign in to comment.