[MultiSelect][base] Require a single tap to select an item on mobile …

…Chrome
mui · Aug 30, 2022 · 705d287 · 705d287
1 parent 2fdf868
commit 705d287
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/packages/mui-base/src/ListboxUnstyled/useListbox.ts b/packages/mui-base/src/ListboxUnstyled/useListbox.ts
@@ -135,9 +135,9 @@ export default function useListbox<TOption>(props: UseListboxParameters<TOption>
       });
     };
 
-  const createHandleOptionMouseOver =
+  const createHandleOptionPointerOver =
     (option: TOption, other: Record<string, React.EventHandler<any>>) =>
-    (event: React.MouseEvent) => {
+    (event: React.PointerEvent) => {
       other.onMouseOver?.(event);
       if (event.defaultPrevented) {
         return;
@@ -294,11 +294,11 @@ export default function useListbox<TOption>(props: UseListboxParameters<TOption>
       ...otherHandlers,
       'aria-disabled': optionState.disabled || undefined,
       'aria-selected': optionState.selected,
-      tabIndex: getOptionTabIndex(optionState),
       id: optionIdGenerator(option, index),
       onClick: createHandleOptionClick(option, otherHandlers),
-      onMouseOver: createHandleOptionMouseOver(option, otherHandlers),
+      onPointerOver: createHandleOptionPointerOver(option, otherHandlers),
       role: 'option',
+      tabIndex: getOptionTabIndex(optionState),
     };
   };
 

diff --git a/packages/mui-base/src/ListboxUnstyled/useListbox.types.ts b/packages/mui-base/src/ListboxUnstyled/useListbox.types.ts
@@ -228,7 +228,9 @@ interface UseListboxOptionSlotOwnProps {
   'aria-selected': React.AriaAttributes['aria-selected'];
   id?: string;
   onClick: React.MouseEventHandler;
+  onPointerOver: React.PointerEventHandler;
   role: React.AriaRole;
+  tabIndex?: number;
 }
 
 export type UseListboxOptionSlotProps<TOther = {}> = Omit<

diff --git a/packages/mui-base/src/OptionUnstyled/OptionUnstyled.test.tsx b/packages/mui-base/src/OptionUnstyled/OptionUnstyled.test.tsx
@@ -14,6 +14,7 @@ const dummyGetOptionProps = () => ({
   'aria-selected': false,
   label: '',
   onClick: () => {},
+  onPointerOver: () => {},
   role: 'option',
   value: '',
 });