[BUG] - Modal automatically closes when selecting an item

[FranMusolino]

NextUI Version

@nextui-org/[email protected] and @nextui-org/[email protected]

Describe the bug

If you use a Select inside a Modal component, selecting an item causes the modal to close automatically. I tried using e.stopPropagation() on several events of the Select component, such as onSelect or onChange, but it didn't work. The only way to prevent this behavior is by removing the following attribute from the Modal component

onOpenChange={(isOpen) => (isOpen ? onOpen() : onClose())}

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Create a Modal component

<Modal
  backdrop='blur'
  isOpen={isOpen}
  onOpenChange={(isOpen) => (isOpen ? onOpen() : onClose())}
  hideCloseButton
  >
  <ModalContent>
    <ModalHeader>
       {/*....*/}
    </ModalHeader>
    <ModalBody>
       {/*....*/}
    </ModalBody>
    <ModalFooter>
      {/*....*/}
    </ModalFooter>
  </ModalContent>
</Modal>

2. Puts a Select component inside the modal

<Modal
  backdrop='blur'
  isOpen={isOpen}
  onOpenChange={(isOpen) => (isOpen ? onOpen() : onClose())}
  hideCloseButton
  >
  <ModalContent>
    <ModalHeader>
       {/*....*/}
    </ModalHeader>
    <ModalBody>
      <Select multiple>
        <SelectItem key={1}>
          Example 1
        </SelectItem>
      </Select>
    </ModalBody>
    <ModalFooter>
      {/*....*/}
    </ModalFooter>
  </ModalContent>
</Modal>

3. Try to select the item

The component which calls the modal is the following

import {  useDisclosure } from '@nextui-org/modal'

export const ModalTrigger = () => {
  const { isOpen, onOpen, onClose } = useDisclosure()

  return (
    <>
      <div>
        <Button
          onClick={onOpen}
        >
          <AddIcon fontSize='large' />
        </Button>
      </div>
      <Modal isOpen={isOpen} onOpen={onOpen} onClose={onClose} />
    </>
  )
}

Expected behavior

Modal automatically closes on item selection

Screenshots or Videos

No response

Operating System Version

Windows 11

Browser

Chrome

[linear[bot]]

ENG-1418 [BUG] - Modal automatically closes when selecting an item

[wingkwong]

have you tried the latest versions?

[FranMusolino]

Yes, I tried with version @nextui-org/[email protected] and @nextui-org/[email protected], same history

[wingkwong]

I tried on latest version and couldn't reproduce the issue. Can you share the sandbox?

[domhhv]

Hi, unfortunately, I'm also affected by this issue. I've been unable to use a Select inside a Modal without issues because when I click on a Select's Option, then the modal just closes itself. I think it treats click on an Option as a click outside the Modal.

In addition to the author's solution that involves removing the onOpenChange prop, I found another "fix" by setting Modal's isDismissible prop to false. But both solutions are not ideal, as I want to keep my Modals dismissible for better accessibility.

Would really love to see a fix to this bug. If needed, I can provide a reproducible sandbox.

[danilotorrisi]

I stumbled upon the same issue, but I have no idea when this regression came up. I tried to downgrade with no luck, but I'm pretty sure it wasn't the case when I first installed next ui a few months ago.

[wingkwong]

@domhhv please help provide a reproducible sandbox.

[domhhv]

For some reason, it's hard to reproduce this issue in a code sandbox or even a clean local setup (modal with select just behaves normally).

But I still do observe this issue in my app and I can provide a reproducible example from there.

If you navigate to https://www.habitrack.io/habits, you'll be able to open two separate modals for adding a habit or editing a mock habit:

• If you try selecting a mock trait within the edit modal, it will close. That modal doesn't apply isDismissible={false}.
• If you try selecting a mock trait within the add modal, it won't close. That modal applies isDismissible={false} and that's a fix I applied to all NextUI Modals in my app.

This app is open-source and uses NextUI. Here's the GitHub repo. Code that renders those two modals can be viewed here (edit modal) and here (add modal). It should be quick to run the app locally if needed (no local db required, just the React app; refer to README.md).

Hopefully, this could work as a reproducible example. @wingkwong Let me know if you need help or if a different example is necessary.

Thanks!

[xbdh]

For some reason, it's hard to reproduce this issue in a code sandbox or even a clean local setup (modal with select just behaves normally).

But I still do observe this issue in my app and I can provide a reproducible example from there.

If you navigate to https://www.habitrack.io/habits, you'll be able to open two separate modals for adding a habit or editing a mock habit:

• If you try selecting a mock trait within the edit modal, it will close. That modal doesn't apply isDismissible={false}.
• If you try selecting a mock trait within the add modal, it won't close. That modal applies isDismissible={false} and that's a fix I applied to all NextUI Modals in my app.

This app is open-source and uses NextUI. Here's the GitHub repo. Code that renders those two modals can be viewed here (edit modal) and here (add modal). It should be quick to run the app locally if needed (no local db required, just the React app; refer to README.md).

Hopefully, this could work as a reproducible example. @wingkwong Let me know if you need help or if a different example is necessary.

Thanks! it works

[domhhv]

Hey @wingkwong. Did you have a chance to look into this? My links to those examples could become obsolete sooner or later.

[p30arena]

I can confirm this, happened after migration from nextui to heroui

[p30arena]

I tested the canary branch, this is fixed by: https://github.com/heroui-inc/heroui/pull/4570

[wingkwong]

@FranMusolino @domhhv can you try again in latest version?

[domhhv]

Hi @wingkwong, apologies for the delayed response, but yes, after upgrading from [email protected] to [email protected], the issue disappeared. I removed isDismissible={false} from all modals with selects over my app.

Thanks a lot!

[DiegoMA1]

I had the same issue with [email protected]. I downgrade it to [email protected] and start working just fine.

[Timmwardion]

Also happening on heroui 2.7.6 and affects the drawer as well as modal and is triggered by the date-picker as well as select. The isDismissible prop stops it just fine but IMHO that's a pretty significant reduction in user-friendliness.

[wingkwong]

@Timmwardion please create a new issue with a minimal reproducible sandbox. thanks.

[Timmwardion]

Thanks @wingkwong deleted node_modules cleared the yarn cache and then ran yarn install and all seems to be working fine...after hours of trying to get a sandbox version to throw the error. Thanks!