Modal이 Mouse Focus에 따라 사라지는 현상 - 해결 👌

이전에 다른 에러를 처리하면서 짧은 코멘트로 이상하게 마우스 포커스가 다른 화면으로 넘어가면 Show 상태이던 Modal이 자꾸 사라진다는 글을 남긴 적이 있다. 

 

다른 부분들을 처리하면서 그 부분은 그렇게 방치해뒀는데 다른 메뉴 부분에서 동일하게 Modal을 처리하다가 이번에는 사라지지 않는다는 것을 발견하고 무언가 차이점을 캐치한듯한 느낌이 들었는데!

 

혹시 Modal 태그가 위치한 부분의 차이 때문에 발생하는 문제인가? 하는 추측으로 태그 위치를 옮겨주었더니 허무하게 해결되어버렸다.

 

100% 정확하다고 말할 수 없지만 내가 이해한 바로는 

Show 상태를 보이도록 제어할 때만 출력되는 Modal이기 때문에 태그의 위치가 전혀 상관없다고 판단하여 동작되고 있는 태그 근처에 대충 위치시켜두었는데 아무래도 Modal 태그의 상위 태그 생명주기와 같이 하는 것 같다. 

 

이러한 추측을 한 근거는 그 문제가 발생했던 Modal을 호출하는 부분이 상위 Navigation 메뉴에서 Drop-down 아이템 중 하나를 클릭할 때 위치하고 있었는데, 아무래도 마우스 포커스가 다른부분으로 이동할 때 해당 Drop-Down 아이템도 사라지게 되어 있었고 그러면서 Modal도 사라지는 문제까지 연결되게 된 것 같기 때문이다. 

 

결론적으로 상위 태그가 위와 같은 문제를 발생시키지 않을 상위 태그에 위치 시켰고 그렇게 처리하고 나니 이 문제는 더 이상 발생하지 않게 되었다. 

 

물론 나를 제외한 많은 분들이 기본적으로 알고 있는 부분이었을 수 있지만 나와 같이 모르고 있었을 분들도 분명 계실 수 있으니 이 글로 인해 도움이 되었으면 좋겠다.