[BUG] - Modal automatically closes when selecting an item

[FranMusolino]

NextUI Version

@nextui-org/select@2.2.5 and @nextui-org/modal@2.0.33

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]

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/select@2.2.7 and @nextui-org/modal@2.0.41, same history

[wingkwong]

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