[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 aff2e30

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?

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.

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

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

Co-authored-by: Siriwat K <siriwatkunaporn@gmail.com> Signed-off-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>

ZeeshanTamboli · 2025-07-24T10:40:07Z

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

@DiegoAndai Added. The test now uses userEvent.click, which covers the bug since it fires the full event sequence: mouseover → mousemove → mousedown → mouseup → click like a real user would in a browser.

DiegoAndai

This looks good to me, thanks for working on it @ZeeshanTamboli

I'll leave the final approve for @siriwatknp

ZeeshanTamboli · 2025-07-28T06:05:04Z

@siriwatknp Can you review?

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

siriwatknp

👍 Great fix.

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

zannager added the scope: select Changes related to the select. 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 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 2 commits July 10, 2025 14:20

check if pointer is down to skip mouseup when clicking item

449e7a9

Add tests

d3daad7

ZeeshanTamboli added 3 commits July 23, 2025 22:31

test if user-event works

d1413bf

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

a7947ce

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

179a28b

siriwatknp reviewed Jul 24, 2025

View reviewed changes

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

siriwatknp reviewed Jul 24, 2025

View reviewed changes

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

siriwatknp reviewed Jul 24, 2025

View reviewed changes

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

ZeeshanTamboli and others added 5 commits July 24, 2025 10:40

test pointerdown

0fd3d7e

use user-event and simulate fake clocks for particular tests only

c83fd0f

restore faked methods

2506f1e

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

d1fae5a

Co-authored-by: Siriwat K <siriwatkunaporn@gmail.com> Signed-off-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>

add comment

cfc12a1

ZeeshanTamboli requested a review from siriwatknp July 24, 2025 10:40

DiegoAndai reviewed Jul 25, 2025

View reviewed changes

siriwatknp reviewed Jul 28, 2025

View reviewed changes

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

siriwatknp approved these changes Jul 28, 2025

View reviewed changes

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

aff2e30

ZeeshanTamboli merged commit 6c9df3c into mui:master Jul 28, 2025
20 checks passed

ZeeshanTamboli mentioned this pull request Jul 28, 2025

[Select] Improve MenuProps.slotProps implementation #46612

Merged

This was referenced Aug 6, 2025

[Select][7.3.0] Select inside Dialog bug #46665

Closed

[Select] Revert - Implement pointer cancellation PR 45789 #46672

Merged

[Select] Pointer Cancellation (WCAG 2.5.2) failure #45301

Open

siriwatknp mentioned this pull request Aug 6, 2025

[release] v7.3.1 #46674

Merged

1 task

ZeeshanTamboli mentioned this pull request Aug 6, 2025

Select: Accidental value selection on input click when menu overflows #46675

Closed

Uh oh!

[Select] Implement pointer cancellation #45789

[Select] Implement pointer cancellation #45789

Uh oh!

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!

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!

Uh oh!

Uh oh!

ZeeshanTamboli commented Jul 24, 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!

ZeeshanTamboli commented Jul 28, 2025

Uh oh!

Uh oh!

siriwatknp left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

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 Jul 10, 2025 •

edited

Loading

DiegoAndai commented Jul 21, 2025 •

edited

Loading

ZeeshanTamboli commented Jul 24, 2025 •

edited

Loading