fix(ui): the issue composer opens on its title, not on the Edit switch
A form dialog opens on the body's first control, and the composer's first control is the Edit / Preview switch above the form: the focus landed there, at open and when a retried load brought the form, and typing went nowhere. A form can now mark the field to open on (data-initial-focus); every other dialog keeps its first control. The Modal's comment on the re-armed watch now says where the focus goes when the focused control is removed but others stay.
This commit is contained in:
@@ -16,6 +16,15 @@ const FOCUSABLE =
|
||||
export const focusablesIn = (root: HTMLElement): HTMLElement[] =>
|
||||
[...root.querySelectorAll<HTMLElement>(FOCUSABLE)].filter((el) => el.offsetParent !== null);
|
||||
|
||||
/** A form's first field — where a dialog opened to fill something in takes the focus: its first
|
||||
* control, unless one is marked `data-initial-focus`. The mark is for a form with a control above
|
||||
* its fields that is not one of them — the issue composer's Edit / Preview switch took the focus,
|
||||
* and typing went nowhere (E32 review). */
|
||||
export const firstFieldIn = (root: HTMLElement): HTMLElement | undefined => {
|
||||
const all = focusablesIn(root);
|
||||
return all.find((el) => el.hasAttribute("data-initial-focus")) ?? all[0];
|
||||
};
|
||||
|
||||
/** Keep Tab / Shift+Tab cycling inside `scope` instead of reaching the inert page behind the
|
||||
* backdrop. Call from a keydown handler that has already decided this dialog is the topmost layer —
|
||||
* a nested dialog must defer to its child. `container` is the scope's own tabIndex=-1 panel, if it
|
||||
|
||||
Reference in New Issue
Block a user