La fenêtre contextuelle HeadlessUI n'est pas cliquable sur les appareils mobiles

Question

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.

Answer 1

Quelqu'un a déjà répondu à ma question sur un autre forum. Le problème est que mon div capture le clic mais ne le transmet pas à l'animation. En ajoutant style={{ pointerEvents: "none" }} au div autour de l'icône du menu, cela a recommencé à fonctionner.