HeadlessUI ポップアップはモバイル デバイスではクリックできません

Question

モバイル デバイスを使用しているとき、または Chrome デバイスのツールバーでページを表示しているときに、HeadlessUI ポップアップ メニューをクリックしようとすると問題が発生します。通常のデスクトップブラウザモードでは問題なく動作するようです。私はコード サンドボックスで数時間をかけてテストし、コードを最も単純な形式に絞り込みました。これは、ここで表示およびデモできます:

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

これはコードの関連部分です:

リーリー

クリックしたときにブラウザで通常のようにメニューがポップアップしない原因を突き止めようとしています。よろしくお願いいたします。

Answer 1

以前、別のフォーラムで誰かが私の質問に答えました。問題は、私の div がクリックをキャプチャしますが、それをアニメーションに渡さないことです。メニュー アイコンの周囲の div に style={{ pointerEvents: "none" }} を追加すると、再び動作し始めました。