Focus Trap

Directive [dgFocusTrap] giam Tab/Shift+Tab trong container — tab không thể nhảy ra ngoài. Đóng/mở qua [dgFocusTrapDisabled]; có method focusFirst() / focusLast().

Cơ bản — bấm vào ô bên trong rồi nhấn Tab nhiều lần

Ngoài container có 2 button "Trước" / "Sau" để bạn so sánh. Khi trap bật, Tab/Shift+Tab không thể chạm tới chúng — focus loop quanh các control bên trong.

Trap container — focus loop bên trong

Tắt/bật trap qua input

Toggle [dgFocusTrapDisabled]. Khi disabled, sentinels được gỡ và Tab thoát ra ngoài bình thường.

disabled = false

🔒 Trap đang bật — Tab loop bên trong

Programmatic — gọi focusFirst() / focusLast()

Dùng #ref="dgFocusTrap" hoặc viewChild(DgFocusTrap) để lấy reference rồi gọi method.

Container có exportAs ref

Snippet

// 1. Cơ bản
<div dgFocusTrap>
  <button>Một</button>
  <input />
  <button>Hai</button>
</div>

// 2. Toggle qua input
<aside dgFocusTrap [dgFocusTrapDisabled]="!isOpen()">…</aside>

// 3. Lấy reference + gọi method
<div #trap="dgFocusTrap" dgFocusTrap>…</div>
<button (click)="trap.focusFirst()">Focus đầu</button>

// hoặc trong component:
import { DgFocusTrap } from 'dungeon-ui';
protected readonly trap = viewChild.required(DgFocusTrap);
this.trap().focusLast();