fix(Select): resolve pointer cancellation issues for WCAG 2.5.2 compliance (#45301)

Author: Kartik-Murthy

Diff for: packages/mui-material/src/Select/Select.test.js

@@ -33,6 +33,54 @@ describe('<Select />', () => {
     skip: ['componentProp', 'componentsProp', 'themeVariants', 'themeStyleOverrides'],
   }));
 
+  describe('WCAG 2.5.2 - Pointer Cancellation', () => {
+    it('should close the menu when dragging away and releasing', () => {
+      const { getByRole, queryByRole } = render(
+        <Select value="">
+          <MenuItem value="">none</MenuItem>
+          <MenuItem value={10}>Ten</MenuItem>
+        </Select>,
+      );
+      const trigger = getByRole('combobox');
+
+      // Open the menu with left mouse button
+      fireEvent.mouseDown(trigger, { button: 0 });
+      expect(getByRole('listbox')).not.to.equal(null);
+
+      // Simulate mouse move to initiate drag
+      fireEvent.mouseMove(document.body);
+
+      // Simulate mouse up outside any menu items
+      fireEvent.mouseUp(document.body);
+
+      // Menu should be closed now
+      expect(queryByRole('listbox', { hidden: false })).to.equal(null);
+    });
+
+    it('should not close the menu when releasing on a menu item after dragging', () => {
+      const { getByRole, getAllByRole } = render(
+        <Select value="">
+          <MenuItem value="">none</MenuItem>
+          <MenuItem value={10}>Ten</MenuItem>
+        </Select>,
+      );
+      const trigger = getByRole('combobox');
+
+      // Open the menu
+      fireEvent.mouseDown(trigger, { button: 0 });
+      const options = getAllByRole('option');
+
+      // Simulate mouse move to initiate drag
+      fireEvent.mouseMove(document.body);
+
+      // Simulate mouse up on a menu item
+      fireEvent.mouseUp(options[0]);
+
+      // Menu should still be open
+      expect(getByRole('listbox')).not.to.equal(null);
+    });
+  });
+
   describe('prop: inputProps', () => {
     it('should be able to provide a custom classes property', () => {
       render(

Diff for: packages/mui-material/src/Select/SelectInput.js

@@ -168,11 +168,6 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
     startedOn: null,
   });
 
-  const focusTrackingRef = React.useRef({
-    isFocused: false,
-    pendingBlur: false,
-  });
-
   React.useImperativeHandle(
     handleRef,
     () => ({
@@ -302,10 +297,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
             current = current.parentElement;
           }
 
-          if (menuItem) {
-            // Simulate a click on the menu item if we released on one
-            menuItem.click();
-          } else {
+          if (!menuItem) {
             // If released outside menu items, close the menu
             update(false, event);
           }
@@ -398,23 +390,9 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
 
   const open = displayNode !== null && openState;
 
-  const handleFocus = (event) => {
-    // Skip duplicate focus events
-    if (!focusTrackingRef.current.isFocused) {
-      focusTrackingRef.current.isFocused = true;
-      focusTrackingRef.current.pendingBlur = false;
-
-      if (onFocus) {
-        onFocus(event);
-      }
-    }
-  };
-
   const handleBlur = (event) => {
     // if open event.stopImmediatePropagation
     if (!open && onBlur) {
-      focusTrackingRef.current.pendingBlur = false;
-      focusTrackingRef.current.isFocused = false;
       // Preact support, target is read only property on a native event.
       Object.defineProperty(event, 'target', { writable: true, value: { value, name } });
       onBlur(event);
@@ -595,7 +573,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
         onKeyDown={handleKeyDown}
         onMouseDown={disabled || readOnly ? null : handleMouseDown}
         onBlur={handleBlur}
-        onFocus={handleFocus}
+        onFocus={onFocus}
         {...SelectDisplayProps}
         ownerState={ownerState}
         className={clsx(SelectDisplayProps.className, classes.select, className)}