flowbite icon indicating copy to clipboard operation
flowbite copied to clipboard

Published 20 hours ago • verified publisher icon themesberg

Modal doesn't close when clicking background or hitting esc button

Open brianpurkiss opened this issue 3 years ago • 6 comments

Describe the bug

Common expected modal functionality is to click outside of the modal to close the modal. Same goes for hitting the esc button.

To Reproduce Steps to reproduce the behavior:

  1. Go to: https://flowbite.com/docs/components/modal/
  2. Open any modal
  3. Click outside of the modal or hit the 'esc' button on the keyboard

Expected behavior I expect the modal to close on either of those. The modal doesn't. I have to click the close button instead.

Desktop:

  • OS: OSX
  • Browser: Chrome & Firefox
  • Version: FF99

Smartphone:

  • Device: iPhone
  • OS: iOS 15.4.1
  • Browser: Safari

Additional context I've replicated this on my local dev and on the Flowbite demo site.

brianpurkiss avatar May 11 '22 14:05 brianpurkiss

+1

KinG-InFeT avatar May 13 '22 16:05 KinG-InFeT

Hey @brianpurkiss,

Fair point. I'll look into this for the next update.

Regarding the keyboard action, we would like to incorproate for all of the components in the future, not just the modal.

zoltanszogyenyi avatar May 18 '22 09:05 zoltanszogyenyi

+1 the same proble for me bro.

Bolibick avatar Jun 22 '22 20:06 Bolibick

Hey @KinG-InFeT @brianpurkiss @Bolibick,

This issue has been addressed in the v1.5 update by closing the modal when clicking outside, but by also enabling the static backdrop (don't close when clicking outside) by using the data-modal-backdrop="static" data attribute on the modal element or by passing the backdrop: "static" or backdrop: dynamic option to a new Modal() class.

This is the commit:

https://github.com/themesberg/flowbite/commit/c111b3fc9ad9fa8ec7e9e1c9479aecf3e79d47e7

Additionally, the body scroll is now disabled when a modal is open.

Keyboard interaction coming in v1.5 as well.

PS: v1.5 is not yet launched, ETA 1-2 weeks.

zoltanszogyenyi avatar Jul 08 '22 15:07 zoltanszogyenyi

Any update to this? It doesn't appear to be released with the 1.5 update, but really excited to use it once it drops

Tom-revere avatar Sep 03 '22 12:09 Tom-revere

How to associate backdrop with particular modal? I think this is important because now when I inspect this will cause conflict when we have multiple modal (stacked) with different z-index settings on each backdrop.

sonyarianto avatar Sep 14 '22 13:09 sonyarianto

This has been addressed and will be released in today's v1.5.4 update.

zoltanszogyenyi avatar Nov 15 '22 11:11 zoltanszogyenyi