Pop timbul HeadlessUI tidak boleh diklik pada peranti mudah alih

Question

Saya menghadapi masalah cuba mengklik menu pop timbul HeadlessUI apabila menggunakan peranti mudah alih atau melihat halaman dalam bar alat peranti Chrome. Nampaknya berfungsi dengan baik dalam mod penyemak imbas desktop biasa. Saya menghabiskan beberapa jam menguji dalam kotak pasir kod dan menyuling kod ke bentuk yang paling mudah, yang boleh dilihat dan ditunjukkan di sini:

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

Ini ialah bahagian kod yang berkaitan:

<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>

Saya cuba memikirkan apa yang menyebabkan menu tidak muncul seperti biasa dalam penyemak imbas apabila diklik. Terima kasih terlebih dahulu atas bantuan anda.

Answer 1

Seseorang menjawab soalan saya di forum lain sebelum ini. Masalahnya ialah div saya menangkap klik tetapi tidak menghantarnya ke animasi. Dengan menambahkan style={{ pointerEvents: "none" }} pada div di sekeliling ikon menu ia mula berfungsi semula.