https://coops.or.kr/assets/controllers/base/visible_focus_controller-4ffe3cd0.js

1import { Controller } from '@hotwired/stimulus';
2import { whenVisible } from 'helpers/visibility_watcher';
3
4/**
5 * @domain DOM 유틸
6 * @concern 표시 상태 변화 감지 후 포커스 이동
7 * @description MutationObserver로 style/class 속성 변화를 감시해 요소가 보이게 되는 순간 focusable 타깃에 포커스를 이동시키는 컨트롤러
8 */
9export default class extends Controller {
10  static targets = ['focusable'];
11
12  connect() {
13    // 열렸다 닫혔다를 반복하는 팝업이라 once: false(계속 지켜본다). connect 시점에
14    // 이미 보이는 상태였다면 그건 열림 전환이 아니므로 fireImmediately: false 로 무시한다.
15    this.stopObservingVisibility = whenVisible(this.element, () => this.focusableTarget.focus(), {
16      once: false,
17      fireImmediately: false,
18    });
19  }
20
21  disconnect() {
22    this.stopObservingVisibility?.();
23  }
24}