HeadlessUI popup is not clickable on mobile devices
P粉848442185
P粉848442185 2023-09-06 12:27:55
0
1
527

I'm having trouble trying to click on the HeadlessUI popup menu when using a mobile device or viewing the page in the Chrome device toolbar. It seems to work fine in regular desktop browser mode. I spent several hours testing in the code sandbox and distilling the code down to its simplest form, which can be viewed and demonstrated here:

https://codesandbox.io/s/react-tailwind-rive-animation-tap-issue-bxlt95?file=/src/App.js

This is the relevant part of the code:

<Popover className="z-5 relative">
  {({ open }) => (
    <>
      <div className="relative z-10">
        <Popover.Button
          aria-label="Main menu"
          className="text-stone-500 focus:outline-none"
        >
          <div className="w-12 h-12">
            <Bars3Icon />
          </div>
        </Popover.Button>
      </div>

      <Transition
        as={Fragment}
        enter="transition ease-out duration-200"
        enterFrom="opacity-0 -translate-y-1"
        enterTo="opacity-100 translate-y-0"
        leave="transition ease-in duration-150"
        leaveFrom="opacity-100 translate-y-0"
        leaveTo="opacity-0 -translate-y-1"
      >
        <Popover.Panel className="absolute right-0 z-10 mt-2 w-[250px] transform drop-shadow-2xl md:w-[600px] bg-white">
          Popup Menu
        </Popover.Panel>
      </Transition>
    </>
  )}
</Popover>

I'm trying to figure out what is causing the menu to not pop up like it normally does in the browser when clicked. Thanks in advance for your help.

P粉848442185
P粉848442185

reply all(1)
P粉459440991

Someone answered my question before on another forum. The problem is that my div captures the click but doesn't pass it to the animation. By adding style={{ pointerEvents: "none" }} to the div around the menu icon, it started working again.

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template