Skip to content

[Select] Implement pointer cancellation #45789

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

[Select] Implement pointer cancellation #45789

wants to merge 5 commits into from
+122 −12

Conversation

Kartik-Murthy
Copy link
Contributor

@Kartik-Murthy Kartik-Murthy commented Apr 2, 2025 •
edited
Loading

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

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

mui-bot commented Apr 2, 2025 •
edited
Loading

Netlify deploy preview

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

@mui/material/Select: parsed: +0.38% , gzip: +0.39%
@mui/material/TablePagination: parsed: +0.31% , gzip: +0.31%
@mui/material/TextField: parsed: +0.35% , gzip: +0.34%
@mui/material: parsed: +0.10% , gzip: +0.11%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 369791d

@zannager zannager added the component: select This is the name of the generic UI component, not the React module! label Apr 2, 2025
@zannager zannager requested a review from siriwatknp April 2, 2025 13:58
@Kartik-Murthy Kartik-Murthy mentioned this pull request Apr 2, 2025
Closed
2 tasks
@Kartik-Murthy 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 Kartik-Murthy force-pushed the fix/select-focus-drag-pointer branch from eb21c2d to aeab281 Compare April 10, 2025 12:19
ZeeshanTamboli
ZeeshanTamboli reviewed Apr 15, 2025
View reviewed changes
Copy link
Member

@ZeeshanTamboli ZeeshanTamboli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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?

@ZeeshanTamboli 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 ZeeshanTamboli added the package: material-ui Specific to @mui/material label Apr 15, 2025
@Kartik-Murthy
Copy link
Contributor Author

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.

@Kartik-Murthy Kartik-Murthy force-pushed the fix/select-focus-drag-pointer branch from 863f35e to 7a58f33 Compare April 15, 2025 17:28
@ZeeshanTamboli ZeeshanTamboli changed the title [Select] Fix focus, drag, and pointer interaction issues [Select] Implement pointer cancellation Apr 16, 2025
@Kartik-Murthy
fix(Select): resolve focus, drag, pointer issues
d31b95c 
- 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)
@Kartik-Murthy
fix: revert import order
a0bf474 
- Restore original import order as per project conventions
@Kartik-Murthy
fix(Select): resolve pointer cancellation issues for WCAG 2.5.2 compl…
5a7a06a 
…iance (mui#45301)
@Kartik-Murthy Kartik-Murthy force-pushed the fix/select-focus-drag-pointer branch from 7a58f33 to 5a7a06a Compare April 16, 2025 08:33
ZeeshanTamboli
ZeeshanTamboli reviewed Apr 16, 2025
View reviewed changes
Copy link
Member

@ZeeshanTamboli ZeeshanTamboli left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 Outdated
@@ -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;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ZeeshanTamboli ZeeshanTamboli ZeeshanTamboli left review comments

@siriwatknp siriwatknp Awaiting requested review from siriwatknp

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
accessibility a11y component: select This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Select] Pointer Cancellation (WCAG 2.5.2) failure
4 participants
@Kartik-Murthy @mui-bot @ZeeshanTamboli @zannager