HeadlessUI 彈出視窗無法在行動裝置上點擊

Question

在使用行動裝置或在 Chrome 裝置工具列中查看頁面時，我在嘗試點擊 HeadlessUI 彈出式功能表時遇到問題。它似乎在常規桌面瀏覽器模式下工作正常。我花了幾個小時在程式碼沙箱中測試並將程式碼提煉成最簡單的形式，可以在此處查看和演示：

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

這是程式碼的相關部分：

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

我試圖找出是什麼導致選單在點擊時無法像瀏覽器中通常那樣彈出。預先感謝您的幫忙。

Answer 1

之前有人在另一個論壇回答了我的問題。問題是我的 div 捕獲了點擊，但沒有將其傳遞給動畫。透過將 style={{ pointerEvents: "none" }} 新增到選單圖示周圍的 div，它再次開始工作。