Beyond · Forms and focus

Dialogs

A <dialog> is hidden unless it carries the open attribute, so binding open to a signal turns the dialog on and off. While it is open the dialog is modal: focus is trapped inside its subtree — Tab cycles only through its controls — and clicks outside it are captured rather than reaching the page behind.

Escape is wired for you. Pressing it closes the dialog and dispatches a close event, returning focus to where it was. Handle onclose to keep your own signal in step; otherwise the next render would reopen the dialog from the still-true signal.

The starting app has a dialog bound to a confirming signal and an onclose that resets it, but the Delete todo button does nothing — nothing ever sets confirming true.

Your turn

Add a handler that opens the dialog, and wire it to the button:

func openDialog(evt *sumi.DOMEvent) {
    confirming.Set(true)
}

<button onclick={openDialog}>Delete todo</button>

Press Run, activate the button (click it, or Tab to it and press Enter), and the dialog appears; press Escape to dismiss it. Solve shows the finished version; Reset restores the start.