フォーカス移動で開いているコンポーネントを自動で閉じる実装と解説

目的

開いているアコーディオンやメニューなど、特定のコンポーネント以外に
フォーカスが移動したとき、自動で閉じるようにする。
キーボード操作やスクリーンリーダー対応のためのアクセシビリティ向け制御。

---

コード

handleFocusBound = this.handleFocus.bind(this);

document.addEventListener('focusin', this.handleFocusBound);

handleFocus(event: FocusEvent) {
  const target = event.target as HTMLElement;
  if (!target.closest('親要素')) {
    フォーカスが外れたときに動作する機能;
  }
}

説明

handleFocusBound = this.handleFocus.bind(this);

this.handleFocus の中で this を常に クラスインスタンス（BaseToggle） に固定するために使用する。
イベントリスナーに直接 this.handleFocus を渡すと this の参照先が変わることがあるため、bind(this) で固定しておく。

---

document.addEventListener('focusin', this.handleFocusBound);

focusin は、フォーカスがどこかの要素に入ったときに発火するイベント。
focus と異なりバブリングするため、親要素でも検知できる。
開いているエリアの外にフォーカスが移動したかを監視するのに適している。

---

closest(selector)

指定したセレクタに一致する 最も近い親要素（または自身） を取得するDOMメソッド。
一致する要素が存在しない場合は null を返す。