La fenêtre contextuelle HeadlessUI n'est pas cliquable sur les appareils mobiles
J'ai du mal à essayer de cliquer sur le menu contextuel HeadlessUI lorsque j'utilise un appareil mobile ou que j'affiche la page dans la barre d'outils de l'appareil Chrome. Cela semble fonctionner correctement en mode navigateur de bureau standard. J'ai passé quelques heures à tester dans le bac à sable de code et à distiller le code jusqu'à sa forme la plus simple, qui peut être consultée et démontrée ici :
https://codesandbox.io/s/react-tailwind-rive-animation-tap-issue-bxlt95?file=/src/App.js
Voici la partie pertinente du 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>
J'essaie de comprendre ce qui empêche le menu d'apparaître comme il le fait normalement dans le navigateur lorsque vous cliquez dessus. Merci d'avance pour votre aide.
