Input onBlur with Focus

검색 관련 Input Component 를 개발 중 이슈가 발생했다.

Input 에 포커스가 생기면 Search Result Component 가 뜨고 포커스를 잃으면 언마운트되어야 한다.

문제는 Search Result Component 에 있는 Button Component 에서 발생했는데, 해당 버튼을 클릭하면, onBlur Event 가 먼저 발생해서 onClick Event 가 발생하지 않았다.

다행히 Google 에 꽤 많은 정보가 있어서 그 중 하나를 참고해서 이를 처리했다.

• onblur-prevents-onclick-react

기본적으로 이를 해결하는 방법은 2개 정도였는데

• 하나는 onClick Event 대신 onMouseDown Event 에서 preventDefault 를 통해 input 의 blur event 를 발생시키지 않는 것
  • onClick 은 onMouseUp onMouseDown 이 같이 있는 Handler 로 알고 있었는데 해당 Handler 에서는 preventDefault 를 해도 Input 의 Blur 상태를 막을 수 없었다. 이는 좀 더 알아볼 필요가 있다.
• 나머지 하나는 Input 의 onBlur 에 setTimeout 으로 Delay 를 주는 것

첫번째 방법이 확실해보여서 적용했는데 두번째는 나중에 테스트 해보고 결과를 추가로 적어봐야겠다.