javascriptreactjstailwind-cssmobile-websiteheadless-ui

HeadlessUI popover not tappable on mobile devices


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

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

Here is the relevant portion 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 preventing the menu from popping up when tapped as it usually does in the browser. Thanks in advance for your help.


Solution

  • Someone answered my question earlier in another forum. The problem was that my div was capturing the tap and not passing it down to the animation. By adding style={{ pointerEvents: "none" }} to the div surrounding the menu icon, it started working again.