bug: 화면 확대 & Dropdown Menu 활성화 시 화면 전환 문제

[jw-r]

개요

스크린을 확대한 상태에서 Shadcn 드롭다운 메뉴를 열면, 사용자가 보던 화면이 아닌 다른 화면으로 이동하는 문제가 발생합니다.

2024-05-04.12.09.49.mov

예상되는 행동

드롭다운 메뉴를 열 때도 화면의 위치가 변경되지 않고 사용자가 현재 보고 있는 부분이 유지되어야 합니다.

실제 행동

드롭다운 메뉴를 열면 화면이 다른 위치로 자동 스크롤되어, 사용자가 보던 내용과 다른 내용이 표시됩니다.

[woo-jk]

해당 버그는 radix ui 라이브러리의 DropdownMenu 컴포넌트 고유의 문제인 것으로 보여요. 해당 버그에 대한 이슈도 올라와있지만, 아직 개선되지 않은 것으로 보입니다.
이슈에 따르면 해당 버그는 Mac OS의 크롬 기반 브라우저에서만 발생하는 것 같아요.

아마도 드랍다운을 열 때 오토 포커싱 관련해서 이런 문제가 발생하는 것 같은데, 임시적인 해결책으로는 DropdownMenu.Content 컴포넌트의 tabIndex props를 undefined로 설정하면 일단 해당 버그는 사라지긴합니다.

2024-05-05.8.45.17.mov

하지만 tabIndex를 undefined으로 설정하게 된다면 키보드 위 아래 키 혹은 tab 키로 드랍다운을 조작하지 못하게 되어 접근성 측면에서 문제가 발생합니다..

그래서 결국

1. 해당 버그를 고치는 대신 키보드 접근성을 포기하거나
2. 일단은 현재 상태로 놔두거나

두 선택지 중 하나를 골라야 할 것 같은데, 개인적인 제 생각으로는 브라우저를 확대해서 앱을 사용하는 케이스가 흔한 상황은 아닌 것 같아 일단은 그냥 지금 상태로 놔두는게 더 낫지 않을까라는 생각이 듭니다. 정우님은 어떻게 생각하시나요?

[jw-r]

너무 잘 정리해주셨네요👍
감사합니다🤩

제시해주신 두 가지 방법들 중 고르자면, 저는 개인적으로 애플리케이션이 마치 멈춘 것처럼 동작하는 현재 상태가 조금 더 크리티컬하다고 느껴졌습니다!
drop-menu가 오픈상태일 때 스크롤 이벤트등도 발생하지 않기 때문인데, 해결방법을 찾아보겠습니다!