Das HeadlessUI-Popup kann auf Mobilgeräten nicht angeklickt werden
Ich habe Probleme beim Klicken auf das HeadlessUI-Popup-Menü, wenn ich ein Mobilgerät verwende oder die Seite in der Symbolleiste des Chrome-Geräts ansehe. Es scheint im normalen Desktop-Browsermodus gut zu funktionieren. Ich habe ein paar Stunden damit verbracht, in der Code-Sandbox zu testen und den Code auf seine einfachste Form zu reduzieren, die hier angezeigt und demonstriert werden kann:
https://codesandbox.io/s/react-tailwind-rive-animation-tap-issue-bxlt95?file=/src/App.js
Hier ist der relevante Teil des Codes:
<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>
Ich versuche herauszufinden, was dazu führt, dass das Menü beim Klicken nicht wie normalerweise im Browser angezeigt wird. Vielen Dank im Voraus für Ihre Hilfe.
