[250527] TIL

Today I Learned (2025-05-27)

바텀 시트 누른 후면 input 포커스가 안되는 문제

🐞 에러 내용

• vaul 바텀시트 사용 시, 바텀시트가 열린 후에는 상단의 SearchResultBar 내 input 창 클릭이 안 됨.
• 바텀시트 좌우의 뒤로가기 버튼과 검색 버튼은 잘 동작함.
• vaul 바텀시트를 사용하지 않으면 input 창 클릭이 잘 됨.
• z-index 문제나 레이어 씌워짐은 육안으로 확인했을 때 아닌 것 같음.

🔍 원인 분석

• vaul 라이브러리의 최신 버전에서 발생하는 알려진 이슈
  • vaul 라이브러리 이슈: https://github.com/emilkowalski/vaul/issues/534
• 바텀시트가 열린 상태에서 외부 input 요소와의 상호작용이 차단되는 문제
• modal={false} 옵션을 설정했음에도 input만 상호작용 불가
• z-index나 레이어 문제가 아닌 것으로 확인

✅ 해결 방법

첫번째 방법

1. vaul 라이브러리를 v0.8.9 버전으로 다운그레이드
2. package.json의 의존성 버전 업데이트
3. 테스트를 통한 기능 정상 동작 확인

• 작업 PR : https://github.com/100-hours-a-week/7-team-ddb-fe/pull/107
• 단점: 바텀 시트 사용성 낮아짐

두번째 방법 (최종 방법)

1. 바텀 시트 사용성을 위해 다시 버전을 복구
2. vaul 라이브러리가 document 이벤트를 등록해서 내부에서 자식 포커스 이벤트를 막는 것 같음
3. event.stopImmediatePropagation() 를 document 에 등록해줌으로써 포커스 막는 것을 우회 시킴

• 작업 PR: https://github.com/100-hours-a-week/7-team-ddb-fe/pull/112
• 참고 이슈 (vaul) : https://github.com/emilkowalski/vaul/issues/497

회고

• 라이브러리 사용 시 발생하는 문제는 해당 라이브러리의 GitHub 이슈를 먼저 확인하는 것이 중요
• 라이브러리 버전 다운그레이드는 임시 해결책일 수 있으므로, 향후 업데이트 시 문제 해결 여부 확인 필요
• 팀원들과 공유하여 동일한 문제가 발생하지 않도록 조치