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

[Bug Report][3.4.9] v-dialog: @keydown.esc does not trigger when in persistent mode #18989

Closed
douglasg14b opened this issue Jan 5, 2024 · 6 comments
Assignees
Labels
C: VDialog VDialog T: bug Functionality that does not work as intended/expected
Milestone

Comments

@douglasg14b
Copy link

douglasg14b commented Jan 5, 2024

Environment

Vuetify Version: 3.4.9
Vue Version: 3.4.5
Browsers: Firefox 120.0
OS: Windows 10

Steps to reproduce

  1. Create a dialog with persistent
  2. Add @keydown.esc to the dialog
  3. Open the dialog
  4. Hit esc

Expected Behavior

The event is fired & handled

Actual Behavior

It is not

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

This appears to have worked in older versions of vuetify

For example, this issue has it working but only if the dialog itself is clicked: #13882

@johnleider johnleider added T: bug Functionality that does not work as intended/expected C: VDialog VDialog and removed S: triage labels Jan 8, 2024
@FiXiLiX
Copy link

FiXiLiX commented Jan 23, 2024

Looking at VOverlay code it looks like this is expected behavior:
image
This piece of code explicitly blocks that kind of behavior. It even intentionally add animation that can be seen in your example.
Documentation for persistent says:
"Clicking outside of the element or pressing esc key will not deactivate it."
Different issue is that keyup and keydown are not passed at all when applied to v-dialog
<v-dialog v-model="dialog" @keyup.enter="dialog = false" max-width="290" >
Without persistent also won't work
while
<v-dialog v-model="dialog" @click="dialog = false" max-width="290" > works
Workaround also does not look very nice plus you need to be really careful to also remove Event Listener when closing modal with buttons (Disagree/Agree)
image

@douglasg14b
Copy link
Author

douglasg14b commented Jan 24, 2024

It even intentionally add animation that can be seen in your example.
Documentation for persistent says:

Clicking outside of the element or pressing esc key will not deactivate it.

That states that it will not deactivate it, not that the keydown events will not be emitted. This is very different than "closing the dialog", I may want to wave an annoying flashy thing at the user when they hit esc because I can, and not close the dialog, for instance.

The animation is expected, the events not being re-emitted is not, that is what this bug report is about.

@FiXiLiX
Copy link

FiXiLiX commented Jan 24, 2024

Upderstand, appologies

looks like I complicated issue even more

I would still add that any keyup and keydown does not work on v-dialog regarless of persistent prop.

All the best, sorry for the confusion!

@fhueter
Copy link

fhueter commented May 6, 2024

Bumping this bug up because as it is implemented at the moment we can not use persistent any more and therefore lose the ability do disable clicking outside the dialog with keeping the self-made "close-on-esc" functionality.

@KaelWD
Copy link
Member

KaelWD commented May 6, 2024

Fixed with #18779

@KaelWD KaelWD closed this as completed May 6, 2024
@KaelWD KaelWD self-assigned this May 6, 2024
@KaelWD KaelWD added this to the v3.5.x milestone May 6, 2024
@douglasg14b
Copy link
Author

Thanks @KaelWD !!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VDialog VDialog T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

No branches or pull requests

5 participants