모바일 장치에서는 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" }}를 추가하면 다시 작동하기 시작했습니다.