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粉4594409912023-09-07 10:50:40
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.