Wzorzec 05

Natywny dialog zamiast diva

Modale budowane na divach wymagają ręcznego zarządzania fokusem, klawiszem Escape i blokadą przewijania, a każda z tych rzeczy psuje się po cichu. Natywny element dialog załatwia to w przeglądarce, a scrollbar-gutter: stable rezerwuje miejsce na pasek przewijania, więc blokada scrolla nie szarpie layoutem.

Modal zaproszenia na natywnym elemencie dialog

Escape zamyka, fokus krąży w środku, tło przyciemnia ::backdrop. Zero bibliotek, zero nasłuchiwania klawiszy.

Reguły

Modal to element dialog otwierany przez showModal(), nie div z z-index.
Fokus, Escape i tło ::backdrop pochodzą z przeglądarki, nie z biblioteki.
html ma scrollbar-gutter: stable, więc zniknięcie paska przewijania nie zmienia szerokości treści.
Po zamknięciu fokus wraca do elementu, który modal otworzył.

Wzorzec w kodzie

showModal daje fokus, Escape i backdrop, method dialog zamyka bez JS

const dialog = useRef<HTMLDialogElement>(null);

<Button onClick={() => dialog.current?.showModal()}>
  Zaproś do projektu
</Button>

<dialog ref={dialog} className="m-auto rounded-2xl backdrop:bg-black/70">
  <form method="dialog">
    <Input label="Adres e-mail" />
    <Button type="submit">Wyślij</Button>
  </form>
</dialog>

Rezerwa na pasek przewijania, blokada scrolla nie zmienia szerokości

html {
  scrollbar-gutter: stable;
}