클릭하면 datepicker 가 렌더링되는 input 요소가 있다. IOS 에서는 input 요소를 클릭하면 정상적으로 렌더링 되는 것을 볼 수 있는데, AOS 에서는 아예 나오지 않는다는 문의가 들어왔다.
가장 먼저 확인해야 할, 근본적인 대상이 되는 datepicker 객체 선언부에 직접 가서 옵션들을 확인해 본다. 의도치 않은 사이드이펙트가 발생할 가능성이 있는 옵션이 있는지. 옵션들을 보아하니, datepicker 스타일 변화 관련 옵션만 있었으며 숨겨질만한 변수가 있는 옵션은 딱히 없었다.
1에서 해결이 안 됐으면, 디버깅 툴의 힘을 빌려 좀 더 기계적으로 다가가야 한다. 일단 어디에서 Breakpoint를 잡아야 하는지 그걸 먼저 결정해야 한다. IOS 에서는 숨겨지지 않는데 AOS 에서는 숨겨진다. 이 둘의 차이점은 스크롤이 변화한다는 점에서 있었다. (IOS에서는 키패드가 뷰포트를 갉아먹지 않지만, AOS에서는 키패드가 뷰포트를 갉아먹는다.)
이러한 정보들을 바탕으로 Breakpoint 는 Event Listener Breakpoint 로 해야겠다고 생각했고, scroll 이벤트(Control→scroll) 을 Breakpoint로 잡으면 될것 같다. 모바일을 디버깅 하기엔 지금은 방법을 몰라 불편함이 따랐다. 따라서 일단은 PC에서 웹 윈도우의 세로 사이즈를 줄이기로 했다. 운 좋게도 Break가 되었고, 그곳에서 datepicker를 hide 하는 소스를 발견할 수 있었다.
datepicker를 왜 hide 하는가? 생각을 해 봤다. 휠을 돌려 스크롤이 이동하면 datepicker가 사라지게 하는 의도라고 생각했다. 스크롤 이벤트는 범위가 좀 넓다. 이 이벤트를 정확히 정의해 보자면, 스크롤의 변화를 감지한다는 것이다. 창 사이즈를 늘였다 줄이면 스크롤이 생기거나 커지거나 작아질 수 있다. 이 또한 스크롤의 변화이며, 이는 마우스휠이랑은 전혀 관계가 없다.
따라서, scroll 이벤트 리스너를 설정하는게 아니라, mousewheel 이벤트로 변경하여 문제를 해결했다.