Skip to content
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.

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

[Dialog] Providing onKeyDown breaks closing via Escape #43738

Closed
hvolschenk opened this issue Sep 12, 2024 · 3 comments · Fixed by #43757
Closed

[Dialog] Providing onKeyDown breaks closing via Escape #43738

hvolschenk opened this issue Sep 12, 2024 · 3 comments · Fixed by #43757
Assignees
Labels
bug 🐛 Something doesn't work component: dialog This is the name of the generic UI component, not the React module! priority: important This change can make a difference regression A bug, but worse v6.x migration

Comments

@hvolschenk
Copy link

hvolschenk commented Sep 12, 2024

Steps to reproduce

Link to live example: codesandbox

Steps:

  1. Validate that pressing escape does not close the <Dialog />.
  2. Comment out the onKeyDown line.
  3. Validate that pressing escape does now close the <Dialog />.

Current behavior

When an onKeyDown handler is passed to the <Dialog /> component,
the Escape key does not work to close the <Dialog /> anymore.

Expected behavior

Just like it used to in v5, the <Dialog /> should close when pressing Escape
even when an onKeyDown is supplied in v6.

Context

No response

Your environment

Check the codesandbox.

Search keywords: dialog, onKeyDown, escape

@hvolschenk hvolschenk added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Sep 12, 2024
@zannager zannager added the component: dialog This is the name of the generic UI component, not the React module! label Sep 13, 2024
@oliviertassinari oliviertassinari changed the title [Dialog]: Providing onKeyDown breaks closing via Escape [Dialog] Providing onKeyDown breaks closing via Escape Sep 13, 2024
@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work regression A bug, but worse v6.x migration priority: important This change can make a difference labels Sep 13, 2024
@oliviertassinari
Copy link
Member

oliviertassinari commented Sep 13, 2024

I guess it's simply that the Modal doesn't follow the template, it should be?

diff --git a/packages/mui-material/src/Modal/Modal.js b/packages/mui-material/src/Modal/Modal.js
index 60d29549ff..bbb7839368 100644
--- a/packages/mui-material/src/Modal/Modal.js
+++ b/packages/mui-material/src/Modal/Modal.js
@@ -156,6 +156,7 @@ const Modal = React.forwardRef(function Modal(inProps, ref) {
   }

   const externalForwardedProps = {
+    ...other,
     slots: {
       root: components.Root,
       backdrop: components.Backdrop,
@@ -218,7 +219,7 @@ const Modal = React.forwardRef(function Modal(inProps, ref) {
        * is not meant for humans to interact with directly.
        * https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md
        */}
-      <RootSlot {...rootProps} {...other}>
+      <RootSlot {...rootProps}>
         {!hideBackdrop && BackdropComponent ? (
           <BackdropSlot {...backdropProps} ref={backdropRef} />
         ) : null}

@KirankumarAmbati
Copy link
Contributor

@oliviertassinari I would like to work on it.

@ZeeshanTamboli ZeeshanTamboli removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Sep 17, 2024
Copy link

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @hvolschenk! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: dialog This is the name of the generic UI component, not the React module! priority: important This change can make a difference regression A bug, but worse v6.x migration
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

8 participants