자바스크립트 컴포넌트 DateRangePicker 일자 겹침, input 태그 자동완성

💢발생 상황

인풋 태그에 자바스크립트 컴포넌트 dateRangePicker를 적용해서 기간 선택창을 설정하던 중

기간 선택 달력과 별개로 반복해서 일자목록이 나타나는 상황이 발생함.

달력만 나와야 하는데 왜 갑자기 날짜 목록이 뜨냐고; 양식도 왠 듣보냐고...싶었다..

 

콘솔에 에러도 안찍히고 문제현상이 발생했다가 안했다가 반복해서  계속 삽질을 하다가...

해당 부분이 html 돔에 속한 내용이 아니라는 것을 알게 되었다.

 

💡원인

dateRangePicker를 적용하는 input태그에 브라우저 자동완성 기능이 적용되서 생긴 문제였다.

(다른 브라우저를 통해서는 문제가 발생하지 않았다.)

 

🔧해결 방법

인풋태그에 기본으로 적용되는 자동완성을 off로 설정해니 해결되었다.

<input autocomplete="off">

 

📖참고

http://www.tcpschool.com/html-tag-attrs/input-autocomplete

코딩교육 티씨피스쿨

https://www.daterangepicker.com/

Date Range Picker — JavaScript Date & Time Picker Library

 

📝느낀점

사소하고 별거아닌거지만 사용자가 보기에 이상하다고 생각할 만한 부분이었다. 또 해당 일자를 선택할 경우 자동입력된 형태로 양식에 맞지 않게 값이 넘거아서 문제였다.

해결하고 보니 에러라고 할 수 없는 간단한 문제지만 이런 것들이 로직 짜는 시간을 잡아먹는다고 생각한다.

이런 부분을 잘 찾고 구글링 하는 연습을 좀더 해야겠다.