vue.js중급 강좌를 들으며 모달관련 질문이있습니다.

Question

- 이전 질문들 중에 모달을 esc로 close하는 방법에 대해서 물어보는 질문이 있어서 참고하여 강사님께서 답변해주신 내용을 토대로 포커싱이 가능한 태그를 찾아 포커스를 주고 그 포커스를 통해 @keyup/down/press.esc="close 처리" 이렇게 코드를 구현하였습니다. 다만 이게 일회성으로 처음에만 포커스가된다는게 문제인데.. 모달창을 한번 팝업했다가 close한 다음 다시 팝업하면 autofocus가 되지 않아 두번째 팝업부턴 esc로 모달이 close되지 않습니다. (새로고침하고 초기시도에만 기능동작) 먼저, 제가 구현한 방식이 답변주신 내용에 부합한지 궁금하며, 혹시 추가적인 해결방안이 있을지 여쭙습니다.

캡틴판교 · Answer

안녕하세요 상헌님, 제가 답변이 늦었네요 :) 포커스로 esc 종료 하시는 경우에는 모달 종료 후 focus 상태를 blur 이벤트 같은 걸로 초기화 해주셔야 할 것 같아요. 가장 간단한 방법은 모달이 열린 경우에 키보드 esc 이벤트 받아서 종료하시면 될 것 같습니다 :)