[BUG] - Modal does not open on mobile when the trigger button is inside a Navbar

mauriciabad commented 1 year ago

NextUI Version

2.1.13

Describe the bug

Given a button to open a modal placed inside a Navbar and uses the onPress event, when taped from a mobile the modal doesn't open.

The onPress works as expected (you can put a console.log to test it). It's weird because if the onOpen function is placed inside the onClick event, then it works.

If the button is placed outside the Navbar it works just fine.

If the modal has the prop disableAnimation it works just fine. So it looks like it's a problem with AnimatePresence from framer motion.

If you do a long press, it works, it doesn't when it is a normal (quick) tap. And if you use the onPressStart event, the modal animation starts when you press, but if you release the button after the animation finished, it goes backwards and doesn't open the modal, but if you wait for the animation to end, it stays open.

I also noticed that when running the documentation's example in codesandbox.io, it doesn't work even without being inside the Navbar.

This is a minimal example: Open in CodeSandbox

'use client'

import React from "react"
import { Button } from '@nextui-org/button'
import {
  Modal,
  ModalBody,
  ModalContent,
  ModalHeader,
  useDisclosure,
} from '@nextui-org/modal'
import { Navbar, NavbarContent, NavbarItem } from '@nextui-org/navbar'

export default function App() {
  const { isOpen, onOpen, onOpenChange } = useDisclosure()
  return (
    <>
      <Navbar isBordered>
        <NavbarContent justify="end">
          <NavbarItem>
            <Button onPress={onOpen}>Not working on mobile</Button>
            <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
              <ModalContent>
                {() => (
                  <>
                    <ModalHeader>Test modal</ModalHeader>
                    <ModalBody>Test modal</ModalBody>
                  </>
                )}
              </ModalContent>
            </Modal>
            <Button onClick={onOpen}>Working</Button>
          </NavbarItem>
        </NavbarContent>
      </Navbar>

      <Button onPress={onOpen}>Working</Button>
    </>
  )
}