wireDialog – Dialog-wiring / Dialog wiring

Om funksjonen

Kanonisk navn

wireDialog

Synonymer

modal, dialog helper, form reset, close listener, HTMLDialogElement, dialog reset

Kategori

dom, dialog

ARIA-mønster

Ikke aktuelt - Legger bare til en close-lytter rundt et eksisterende native <dialog>, uten å definere et eget widgetmønster.

Native-first-vurdering

Bruker allerede native <dialog> og dets close-hendelse; funksjonen er kun et tynt lag som nullstiller skjemaet ved lukking.

Nettleserstøtte

Selve funksjonen bruker bare addEventListener("close", ...), men den beskrevne bruken forutsetter støtte for native <dialog>. README-eksemplet bygger også på Invoker Commands API (command/commandfor) i HTML, uten JS-fallback herfra.

Sist endret

20. september 2026

Brukt

7 steder

Formål

Bruk native <dialog> til åpning og lukking; denne funksjonen gjør bare JS-delen som gjenstår og nullstiller et tilhørende skjema når dialogen lukkes, også ved Escape eller programmatisk lukking. Den er generisk for skjema-i-dialog-mønstre.

Egner seg for

• Dialoger med skjema som skal nullstilles hver gang de lukkes, enten det skjer via knapp, Escape eller kode.

Egner seg ikke for

• Ikke for åpning, fokusstyring eller annen dialoglogikk. Hvert kall legger bare til én close-lytter, så gjentatte kall gir flere lyttere.

Signatur(er)

wireDialog({dialog, form}: {dialog: HTMLDialogElement, form?: HTMLFormElement}) => HTMLDialogElement

Returnerer: Samme dialog-element, uendret, for eventuell kjeding.

import {wireDialog} from "/designsystem/funksjoner/dom/dialog/dialog.js";

wireDialog({
    dialog: document.getElementById("ny-tur-dialog"),
    form: document.getElementById("ny-tur-form"),
});

Tilgjengelighet

Funksjonen nullstiller bare skjemaet. Tilgjengeligheten kommer fra korrekt bruk av native <dialog> og HTML-en rundt.

Referanser

Se også:

• ../../oppslag/populer-tidssone-valg/index.html - Begge er små DOM-hjelpere som typisk kobles til skjemaer i modaler og andre editorflater.
• ../../../komponenter/tilbakemelding/confirm-dialog/index.html - Komponenten er et naturlig UI-lag oppå samme native dialog-mekanisme.

Brukes av:

• turer/js/features/receipts/receipts.js
• turer/js/features/flights/flights.js
• turer/js/features/hotels/hotels.js
• turer/js/features/stops/stops.js
• turer/js/features/album/album.js
• turer/js/features/header/header.js
• turer/js/pages/dashboard.js

Avhengigheter: Ingen