[Select] Implement pointer cancellation #45789

Kartik-Murthy · 2025-04-02T06:24:36Z

Description
This PR resolves pointer cancellation issues in the Select component to ensure compliance with WCAG 2.5.2 accessibility requirements.

Changes

Added proper pointer event handling to address accessibility concerns
Included test cases to verify WCAG 2.5.2 compliance

Fixes #45301

Aditional

I have followed (at least) the PR section of the contributing guide.

mui-bot · 2025-04-02T11:42:05Z

Netlify deploy preview

https://deploy-preview-45789--material-ui.netlify.app/

Bundle size report

Bundle	Parsed Size	Gzip Size
@mui/material	🔺+560B^(+0.11%)	🔺+237B^(+0.16%)
@mui/lab	0B^(0.00%)	0B^(0.00%)
@mui/system	0B^(0.00%)	0B^(0.00%)
@mui/utils	0B^(0.00%)	0B^(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against de2f809

ZeeshanTamboli

@Kartik-Murthy Thanks for the PR! Let’s keep it focused on one thing. Issues #44505 and #45374 shouldn’t be addressed yet — they’ll be handled once the Material UI Select is built on top of Base UI. For now, let’s just implement #45301. Could you remove the other changes and add a test case for #45301?

Kartik-Murthy · 2025-04-15T17:28:20Z

Thank you @ZeeshanTamboli for the guidance! I've revised the PR to focus solely on fixing issue #45301 . I've removed the changes related to the other issues as requested and added test cases to verify the behavior. Let me know if you'd like to see any additional changes.

ZeeshanTamboli

Before reviewing this in detail, I’m wondering whether we should even add this feature (or maybe it's an accessibility bug?), given that it already works in Base UI Select — and Material UI will eventually be built on top of Base UI.

@aarongarciah @DiegoAndai What do you think? How far off is the Material UI release based on Base UI? How should we handle support requests and community PRs like this in the meantime? There have been a few similar feature additions — see #45789 (review).

If we decide to go ahead with adding this in 7.x despite the upcoming Base UI integration in a new major version, I’ll proceed with a full review.

ZeeshanTamboli · 2025-04-16T14:18:55Z

packages/mui-material/src/Select/SelectInput.js

@@ -234,6 +243,11 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
    event.preventDefault();
    displayRef.current.focus();

+    // Mark that we've initiated a pointer interaction
+    setIsPointerDown(true);
+    dragSelectRef.current.startedOn = displayRef.current;


startedOn stored here isn't used anywhere. Is it needed?

Thanks for pointing this out! This line was an attempt from an earlier approach I was exploring. It's not needed for the pointer cancellation fix, so I'll remove it.

- Fixed onFocus being triggered excessively (mui#44505) - Enabled drag-and-release to select items (mui#45374) - Addressed pointer cancellation (WCAG 2.5.2) failure (mui#45301)

- Restore original import order as per project conventions

…iance (mui#45301)

DiegoAndai · 2025-06-12T19:06:22Z

Hey @Kartik-Murthy, thanks for working on this, sorry for the delay.

@ZeeshanTamboli, we can move forward with this review. I don't have an estimate for Material UI being rebuilt on top of Base UI.

About the solution, I wonder if there's a way of handling the mouse up from the items, instead of having to set a global event listener. Did you explore that idea?

ZeeshanTamboli · 2025-06-23T14:29:41Z

About the solution, I wonder if there's a way of handling the mouse up from the items, instead of having to set a global event listener. Did you explore that idea?

@DiegoAndai I am not sure how we can do that. We need to handle the case where the mouse is released outside the menu entirely — and that can't be reliably detected unless you're listening on document. If we only attach mouseup on menu items, we'll miss clicks released outside the menu, meaning the menu may remain open when it shouldn’t.

DiegoAndai

@ZeeshanTamboli thanks for the reply, that makes sense.

I made an initial review.

DiegoAndai · 2025-06-24T20:38:09Z

packages/mui-material/src/Select/SelectInput.js

+      const handleGlobalMouseMove = () => {
+        if (isPointerDown) {
+          dragSelectRef.current.isDragging = true;
+        }
+      };


Is it necessary to check whether the pointer is dragging? Isn't it enough to check what the mouse up event target is?

DiegoAndai · 2025-06-24T20:39:23Z

packages/mui-material/src/Select/Select.test.js

@@ -34,6 +34,54 @@ describe('<Select />', () => {
    skip: ['componentProp', 'componentsProp', 'themeVariants', 'themeStyleOverrides'],
  }));

+  describe('WCAG 2.5.2 - Pointer Cancellation', () => {


I think this is enough

Suggested change

describe('WCAG 2.5.2 - Pointer Cancellation', () => {

describe('Pointer cancellation', () => {

DiegoAndai · 2025-06-24T20:44:06Z

packages/mui-material/src/Select/SelectInput.js

+          while (current && !menuItem) {
+            // Check if this element has role="option"
+            if (current.getAttribute && current.getAttribute('role') === 'option') {
+              menuItem = current;
+            }
+            current = current.parentElement;
+          }


Why do we need this check?

DiegoAndai · 2025-06-24T20:44:39Z

packages/mui-material/src/Select/SelectInput.js

+            current = current.parentElement;
+          }
+
+          if (!menuItem) {


If a menu item is found, should we select it? This is how native select works.

Kartik-Murthy force-pushed the fix/select-focus-drag-pointer branch from cbb9faa to 74a4a03 Compare April 2, 2025 11:39

zannager added the component: select This is the name of the generic UI component, not the React module! label Apr 2, 2025

zannager requested a review from siriwatknp April 2, 2025 13:58

Kartik-Murthy mentioned this pull request Apr 2, 2025

[Button] Add support for anchor tag attributes in Button component #45765

Closed

2 tasks

Kartik-Murthy force-pushed the fix/select-focus-drag-pointer branch 7 times, most recently from 5d7bc9c to eb21c2d Compare April 8, 2025 06:35

Kartik-Murthy force-pushed the fix/select-focus-drag-pointer branch from eb21c2d to aeab281 Compare April 10, 2025 12:19

ZeeshanTamboli reviewed Apr 15, 2025

View reviewed changes

ZeeshanTamboli changed the title ~~[material-ui][Select] Fix focus, drag, and pointer interaction issues~~ [Select] Fix focus, drag, and pointer interaction issues Apr 15, 2025

ZeeshanTamboli added the package: material-ui Specific to @mui/material label Apr 15, 2025

Kartik-Murthy force-pushed the fix/select-focus-drag-pointer branch from 863f35e to 7a58f33 Compare April 15, 2025 17:28

Kartik-Murthy requested a review from ZeeshanTamboli April 15, 2025 17:35

ZeeshanTamboli changed the title ~~[Select] Fix focus, drag, and pointer interaction issues~~ [Select] Implement pointer cancellation Apr 16, 2025

ZeeshanTamboli added the accessibility a11y label Apr 16, 2025

Kartik-Murthy force-pushed the fix/select-focus-drag-pointer branch from 7a58f33 to 5a7a06a Compare April 16, 2025 08:33

ZeeshanTamboli reviewed Apr 16, 2025

View reviewed changes

Kartik-Murthy force-pushed the fix/select-focus-drag-pointer branch from 369791d to 74f06a8 Compare April 17, 2025 03:10

Kartik-Murthy added 4 commits April 18, 2025 07:26

fix(Select): resolve focus, drag, pointer issues

2874b92

- Fixed onFocus being triggered excessively (mui#44505) - Enabled drag-and-release to select items (mui#45374) - Addressed pointer cancellation (WCAG 2.5.2) failure (mui#45301)

fix: revert import order

a757802

- Restore original import order as per project conventions

fix(Select): resolve pointer cancellation issues for WCAG 2.5.2 compl…

8f7e282

…iance (mui#45301)

chore(Select): remove unused startedOn property from dragSelectRef

d91d5ba

Kartik-Murthy force-pushed the fix/select-focus-drag-pointer branch from 74f06a8 to d91d5ba Compare April 18, 2025 01:56

ZeeshanTamboli added 2 commits June 23, 2025 17:14

Merge branch 'master' into fix/select-focus-drag-pointer

011310a

Merge branch 'master' into fix/select-focus-drag-pointer

c322fa9

DiegoAndai reviewed Jun 24, 2025

View reviewed changes

ZeeshanTamboli added 5 commits June 25, 2025 19:04

try another better logic

d72df91

Merge branch 'master' into fix/select-focus-drag-pointer

5cc8671

Add more logic

a3a58a9

Add tests

1d111f1

try out user-event

de2f809

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

[Select] Implement pointer cancellation #45789

[Select] Implement pointer cancellation #45789

Kartik-Murthy commented Apr 2, 2025 •

edited

Loading

Uh oh!

mui-bot commented Apr 2, 2025 •

edited

Loading

Uh oh!

ZeeshanTamboli left a comment

Uh oh!

Kartik-Murthy commented Apr 15, 2025

Uh oh!

ZeeshanTamboli left a comment •

edited

Loading

Uh oh!

ZeeshanTamboli Apr 16, 2025

Uh oh!

Kartik-Murthy Apr 16, 2025

Uh oh!

DiegoAndai commented Jun 12, 2025 •

edited

Loading

Uh oh!

ZeeshanTamboli commented Jun 23, 2025 •

edited

Loading

Uh oh!

DiegoAndai left a comment

Uh oh!

DiegoAndai Jun 24, 2025

Uh oh!

DiegoAndai Jun 24, 2025

Uh oh!

DiegoAndai Jun 24, 2025

Uh oh!

DiegoAndai Jun 24, 2025

Uh oh!

Uh oh!

	describe('WCAG 2.5.2 - Pointer Cancellation', () => {
	describe('Pointer cancellation', () => {

Uh oh!

[Select] Implement pointer cancellation #45789

Are you sure you want to change the base?

[Select] Implement pointer cancellation #45789

Conversation

Kartik-Murthy commented Apr 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Aditional

Uh oh!

mui-bot commented Apr 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Netlify deploy preview

Bundle size report

Uh oh!

ZeeshanTamboli left a comment

Choose a reason for hiding this comment

Uh oh!

Kartik-Murthy commented Apr 15, 2025

Uh oh!

ZeeshanTamboli left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ZeeshanTamboli Apr 16, 2025

Choose a reason for hiding this comment

Uh oh!

Kartik-Murthy Apr 16, 2025

Choose a reason for hiding this comment

Uh oh!

DiegoAndai commented Jun 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ZeeshanTamboli commented Jun 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

DiegoAndai left a comment

Choose a reason for hiding this comment

Uh oh!

DiegoAndai Jun 24, 2025

Choose a reason for hiding this comment

Uh oh!

DiegoAndai Jun 24, 2025

Choose a reason for hiding this comment

Uh oh!

DiegoAndai Jun 24, 2025

Choose a reason for hiding this comment

Uh oh!

DiegoAndai Jun 24, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Kartik-Murthy commented Apr 2, 2025 •

edited

Loading

mui-bot commented Apr 2, 2025 •

edited

Loading

ZeeshanTamboli left a comment •

edited

Loading

DiegoAndai commented Jun 12, 2025 •

edited

Loading

ZeeshanTamboli commented Jun 23, 2025 •

edited

Loading