Skip to content

[pickers][fields] Handle form submission when pressing Enter on fields with accessible DOM structure #13066

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
LukasTy opened this issue May 9, 2024 · 1 comment · May be fixed by #17328
Open

[pickers][fields] Handle form submission when pressing Enter on fields with accessible DOM structure #13066

LukasTy opened this issue May 9, 2024 · 1 comment · May be fixed by #17328
Assignees
@LukasTy
Labels
component: pickers This is the name of the generic UI component, not the React module! enhancement This is not a bug, nor a new feature feature: Keyboard editing Related to the pickers keyboard edition

Comments

@LukasTy
Copy link
Member

LukasTy commented May 9, 2024 •
edited by github-actions bot
Loading

Created from #12964 (comment)

The accessible DOM structure fields do not allow form submitting when Enter is clicked on a focused input.

A proposed solution is to rely on form.requestSubmit(), but it has its drawbacks (which are discussed within the linked issue).

An alternative solution is to explore if the option of aligning the approach with native date input (it doesn't use contentEditable elements, but possibly handles all keyboard events explicitly) would circumvent this issue.

Search keywords:
@LukasTy LukasTy added component: pickers This is the name of the generic UI component, not the React module! enhancement This is not a bug, nor a new feature feature: Keyboard editing Related to the pickers keyboard edition labels May 9, 2024
@LukasTy LukasTy self-assigned this Jan 7, 2025
@LukasTy
Copy link
Member Author

LukasTy commented Jan 7, 2025

@LukasTy to explore if the state of using requestSubmit() is still problematic.
If it is, look into if React 19 API could help in this case. If it solves the problem—we can fix it only for React 19 reliably and add a doc example or opt-in or opt-out usage of requestSubmit for older React versions.

@joserodolfofreitas joserodolfofreitas added waiting for 👍 Waiting for upvotes and removed waiting for 👍 Waiting for upvotes labels Feb 24, 2025
@flaviendelangle flaviendelangle changed the title [fields] Handle form submit on Enter click with "v7" fields [fields] Handle form submission when pressing Enter on fields with new DOM structure Feb 24, 2025
@flaviendelangle flaviendelangle changed the title [fields] Handle form submission when pressing Enter on fields with new DOM structure [fields] Handle form submission when pressing Enter on fields with accessible DOM structure Feb 24, 2025
@oliviertassinari oliviertassinari changed the title [fields] Handle form submission when pressing Enter on fields with accessible DOM structure [pickers][fields] Handle form submission when pressing Enter on fields with accessible DOM structure Mar 1, 2025
@LukasTy LukasTy added this to the 8.0.0 milestone Mar 25, 2025
@LukasTy LukasTy linked a pull request Apr 11, 2025 that will close this issue
Draft
@LukasTy LukasTy removed this from the 8.0.0 milestone Apr 11, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@LukasTy LukasTy

Labels
component: pickers This is the name of the generic UI component, not the React module! enhancement This is not a bug, nor a new feature feature: Keyboard editing Related to the pickers keyboard edition
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[fields] Fix to submit a form on Enter press with accessible DOM structure LukasTy/mui-x
2 participants
@joserodolfofreitas @LukasTy