Cannot read properties of undefined (reading '_focusTabbable')

❓  '_focusTabbable' 에러

 

오늘 발생한 새로운 에러 🥳

다이얼로그 두개를 띄워놓고

 

 

팝업 1이 있는데, 뒤의 팝업2를 먼저 닫고 앞의 팝업1을 닫으면 아래의 에러가 발생했다

 

TypeError: Cannot read properties of undefined (reading '_focusTabbable')
    at t.<computed>.<computed>.focusin (http://localhost:8081/webjars/jquery-ui/1.12.1/jquery-ui.min.js?bust=1734406854554:11:9363)
    at HTMLDocument.r (http://localhost:8081/webjars/jquery-ui/1.12.1/jquery-ui.min.js?bust=1734406854554:6:9786)
    at HTMLDocument.dispatch (http://localhost:8081/webjars/jquery/3.5.1/jquery.min.js?bust=1734406854554:2:43090)
    at v.handle (http://localhost:8081/webjars/jquery/3.5.1/jquery.min.js?bust=1734406854554:2:41074)
    at Object.trigger (http://localhost:8081/webjars/jquery/3.5.1/jquery.min.js?bust=1734406854554:2:71513)
    at Object.simulate (http://localhost:8081/webjars/jquery/3.5.1/jquery.min.js?bust=1734406854554:2:72016)
    at HTMLDocument.i (http://localhost:8081/webjars/jquery/3.5.1/jquery.min.js?bust=1734406854554:2:72305)

 

보다 보니 jquery-ui 에서 발생하는 에러이긴 한데...

일단 내가 구현한 부분에서 해결을 봐야 했으므로 찾다보니

다이얼로그를 닫을 때 close 로 닫은게 문제인 것 같았음

 

팝업2를 닫으면서

  jQuery UI의 _focusTabbable 메서드가 undefined 또는 null 상태의 다이얼로그를 참조하고 있게 되어 발생한 문제였다

 

---

 

 

1.

 

close는 다이얼로그를 닫고 숨기지만, DOM 요소와 인스턴스는 유지되기 때문에 발생한 것이라 생각해서

$dialog.dialog("close");     >     $dialog.dialog("destroy"); 로 수정했다

 

결과는 실패

 

2. 

 

beforeClose 로 닫히기 전에 다이얼로그를 정리하는 로직을 추가했다

(다이얼로그가 닫히기 전에 실행되는 콜백)

 

성공!

 

3.

 

찾다보니 다이얼로그가 중첩되어 있을 경우 Esc 키로 인한 오류도 많이 발생한다고 해서,

closeOnEscape 도 false로 설정했다.

(별도로 설정하지 않으면 기본값은 true)

 

 

---

 

 

결론

$dialog.dialog({
    closeOnEscape: false,
    beforeClose: function() {
        if ($dialog) {
            $dialog.dialog("destroy");
        }
    }
});