Calling onBlur and mutating state can onClick not to fire

리액트에는 focus를 위한 이벤트가 onFocus, onBlur 두 종류가 있다. 이 때 onBlur가 다른 이벤트를 먹어서 다른 이벤트가 fire되지 않는 경우가 있다.

이에 대한 해결방법으로는 releatedTarget을 활용한 방법이 있다.

  const onLeaveFocusUserMenu = useCallback((e) => {
    setUserMenu(false)
    e.relatedTarget?.click()
  }, [])

만약 먹히는 이벤트가 클릭인 경우에 위와 같이 적용하면 해결된다. 다른 이벤트의 경우는 아직 경험하지 못했지만 비슷하게 적용하면 될것으로 봄

🥵🥵위에 방식은 버튼 클릭이벤트일 경우에만 적용됨.

Link의 경우 동작을 안하는 현상이 일어나서 검색해보니 2가지 방식이 있다.

1. setTimeout을 활용해서 onBlur 이벤트를 이벤트큐에 뒷번으로 옮긴다.
2. onBlur 보다 먼저 일어나는 이벤트(onMouseDown)를 활용해서 처리한다.

참고링크

• https://github.com/facebook/react/issues/4210
• https://reactjs.org/docs/accessibility.html
• https://gist.github.com/pstoica/4323d3e6e37e8a23dd59