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

[mauriciabad]

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>
    </>
  )
}

Your Example Website or App

https://codesandbox.io/p/sandbox/hxgdz8?file=%2FApp.jsx%3A7%2C13&utm_medium=sandpack

Steps to Reproduce the Bug or Issue

Open the page from a mobile and tap the button inside the navbar.

Alternatively, you can open the devtools and emulate a touch device.

Expected behavior

Modal is opened.

Screenshots or Videos

https://github.com/nextui-org/nextui/assets/12821361/646b7bd6-ec18-4d40-8990-2a692a396690

Operating System Version

Android

Browser

Chrome

[mauriciabad]

If someone encounters the same problem, I found 2 workarounds.

1. Instead of onPress use onClick in the <Button>.
2. Add the disableAnimation to the <Modal>

[timomedia]

I also got the same error

[myxtype]

me too

[ETOPS7]

The same problem on mobiles! instead of onPress helped onClick

[mozart25]

me too. onclick working thx

[dragos99]

Same here. However, With onClick the buttons does not support keyboard events and we need to add them manually.

[AmandaOliver]

I'm experiencing the same issue, and I need to support keyboard events, so I replaced by onPress by the following code, I hope this helps somebody.

<Button
    color="primary"
    onClick={handleButtonClick}
    onKeyDown={(e) => {
      if (e.key === 'Enter') {
        handleButtonClick()
      }
    }}
  >
    {buttonLabel}
</Button>