search

themesberg / flowbite-svelte

Official Svelte components built for Flowbite and Tailwind CSS
https://flowbite-svelte.com
MIT License
2.22k stars 272 forks source link

Modal: add separate prop to disable close with "Escape" #1025

Open sspilleman opened 1 year ago

sspilleman commented 1 year ago

Summary

Currently there is the "dismissable" prob. That is controlling 2 results:

  1. It will add the "colse" button, AND
  2. Ability to dismiss the modal with the "Escape" key

I would like to have the ability to still have the close button but not enable dismissing with the escape key.

Motivation

User might press "Escape" accidentally, thus closing the Modal, which might not be what you want in all cases

jjagielka commented 1 year ago

If you have that specific need why not to set dismissable={false} and add your own CloseButton?

<Modal bind:open>
  <div slot="header" class="flex items-center">
    <h3>My title</h3>
   <CloseButton on:click={()=> open=false} />
 </div>
... rest of the modal content ...
</Modal>
sspilleman commented 1 year ago

That is what I'm planning to do... but I think that is a workaround, not a real solution... I then need to think about positioning etc

cintek commented 1 month ago

Keyboard users expect the Esc key to close modal dialogs; ensure that this behavior is implemented and maintained.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

So, it is not recommended to prevent using the Escape button if you find accessibility important enough.