[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	🔺+518B^(+0.10%)	🔺+181B^(+0.12%)
@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 d3daad7

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.

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

- 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-26T09:16:06Z

@DiegoAndai I’ve moved the pointer cancellation logic into the mousedown handler instead of using a useEffect and detecting over there if the pointer is down or not. While the effect-based approach technically works, handling it directly in the event feels cleaner and could be more performant. What do you think?

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

DiegoAndai · 2025-07-04T19:28:54Z

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

@@ -571,6 +602,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
            ...listProps,
          },
          paper: {
+            ref: paperRef,


A ref could be comming in paperProps that breaks this, doesn't it? We should probably merge paperRef, paperProps.ref, and pass that.

Nice catch. Handled this.

DiegoAndai · 2025-07-04T19:30:15Z

While the effect-based approach technically works, handling it directly in the event feels cleaner and could be more performant. What do you think?

I agree, it's also how Base UI does it 👍🏼: https://github.com/mui/base-ui/blob/master/packages/react/src/select/trigger/SelectTrigger.tsx#L161

DiegoAndai · 2025-07-04T19:31:42Z

@ZeeshanTamboli good work, this looks almost ready for me. I'm only missing the selection when onMouseUp happens on a select item. I think we should add this, following Base's implementation which adds it to the items onMouseUp handler: https://github.com/mui/base-ui/blob/master/packages/react/src/select/item/SelectItem.tsx#L182

Would that be possible?

This is what I'm referencing, selecting with a single click:

Screen.Recording.2025-07-04.at.15.32.11.mov

This reverts commit 57fe123.

ZeeshanTamboli · 2025-07-09T13:15:59Z

@ZeeshanTamboli good work, this looks almost ready for me. I'm only missing the selection when onMouseUp happens on a select item. I think we should add this, following Base's implementation which adds it to the items onMouseUp handler: https://github.com/mui/base-ui/blob/master/packages/react/src/select/item/SelectItem.tsx#L182

Would that be possible?

This is what I'm referencing, selecting with a single click:

Screen.Recording.2025-07-04.at.15.32.11.mov

@DiegoAndai Do you consider this to be part of the pointer cancellation feature we are doing in this PR? If not, we can handle it in a separate PR.

DiegoAndai · 2025-07-09T14:34:35Z

Do you consider this to be part of the pointer cancellation feature we are doing in this PR?

Yes, to me the "mouse down > mouse up" flow is not complete without item selection. I would rather merge all at once.

ZeeshanTamboli · 2025-07-09T15:08:29Z

Do you consider this to be part of the pointer cancellation feature we are doing in this PR?

Yes, to me the "mouse down > mouse up" flow is not complete without item selection. I would rather merge all at once.

@DiegoAndai Done. Ready for further review.

DiegoAndai · 2025-07-09T16:24:37Z

Code looks good @ZeeshanTamboli!

Multiple select demos are broken though: https://deploy-preview-45789--material-ui.netlify.app/material-ui/react-select/#multiple-select

Base UI recently implemented multiple, maybe there are some clues there? mui/base-ui#2173

Scary that these weren't caught by tests, lets add some after finding the root cause of why this PR broke the demos.

ZeeshanTamboli · 2025-07-10T11:55:35Z

Code looks good @ZeeshanTamboli!

Multiple select demos are broken though: https://deploy-preview-45789--material-ui.netlify.app/material-ui/react-select/#multiple-select

Base UI recently implemented multiple, maybe there are some clues there? mui/base-ui#2173

@DiegoAndai Fixed now. It was occuring because both the mouseup and click events were triggering when we click on a menu item. It should trigger either mouseup or click. When clicking the item, it should trigger only click and cancel mouseup and when doing mouseup it should trigger only onMouseUp. I copied the pointer down logic from Base UI for this: https://github.com/mui/base-ui/blob/master/packages/react/src/select/item/SelectItem.tsx#L197C9-L197C26

Scary that these weren't caught by tests, lets add some after finding the root cause of why this PR broke the demos.

I think the bug wasn't caught because the tests didn't simulate both mouseup and click. However, surprisingly, there were no tests that directly checked item selection.

DiegoAndai · 2025-07-21T20:29:12Z

Thanks @ZeeshanTamboli!

think the bug wasn't caught because the tests didn't simulate both mouseup and click.

Could we use userEvent to add a test that would cover this?

cc @siriwatknp for awareness. We're close to merging this. May I ask you to review it? I want to be extra cautious with the Select as it's a priority component.

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

packages/mui-material/src/Select/SelectInput.js Outdated Show resolved Hide resolved

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 8 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

fix

b82657c

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

431d820

add beforeEach

869a18c

ZeeshanTamboli reviewed Jun 26, 2025

View reviewed changes

packages/mui-material/src/Select/SelectInput.js Show resolved Hide resolved

ZeeshanTamboli requested a review from DiegoAndai June 26, 2025 09:34

DiegoAndai reviewed Jul 4, 2025

View reviewed changes

ZeeshanTamboli added 4 commits July 7, 2025 12:45

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

8e5ec3f

select item on mouse up

57fe123

Revert "select item on mouse up"

636a26a

This reverts commit 57fe123.

merge ref coming from paper props

ba010c3

ZeeshanTamboli requested a review from DiegoAndai July 9, 2025 13:16

ZeeshanTamboli added 2 commits July 9, 2025 19:51

fix test

e7b93c4

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

89b5273

select item on mouse up

ae8127f

ZeeshanTamboli added 2 commits July 10, 2025 14:20

check if pointer is down to skip mouseup when clicking item

449e7a9

Add tests

d3daad7

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!

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 26, 2025

Uh oh!

Uh oh!

DiegoAndai Jul 4, 2025

Choose a reason for hiding this comment

Uh oh!

ZeeshanTamboli Jul 9, 2025

Choose a reason for hiding this comment

Uh oh!

DiegoAndai commented Jul 4, 2025

Uh oh!

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

Uh oh!

Uh oh!

ZeeshanTamboli commented Jul 9, 2025

Uh oh!

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

Uh oh!

Uh oh!

ZeeshanTamboli commented Jul 9, 2025

Uh oh!

DiegoAndai commented Jul 9, 2025

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

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

DiegoAndai commented Jul 4, 2025 •

edited

Loading

DiegoAndai commented Jul 9, 2025 •

edited

Loading

ZeeshanTamboli commented Jul 10, 2025 •

edited

Loading

DiegoAndai commented Jul 21, 2025 •

edited

Loading