peter/siftlode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(ui): a membership menu re-homes focus a frame later, once its new rows are on the list

Browse Source 
Rows that just mounted join the menu's navigation list a render after the status effect ran: a row
focused that early was unknown to it, and the arrows did nothing from it (seen live after a keyboard
Retry). The retry test now arrows on from the row it lands on.
This commit is contained in:
peter
2026-10-08 22:16:47 +02:00
parent 4eaa55385f
commit 83886494ce
2 changed files with 23 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ui/MembershipMenu.tsx
+17 -12
View File
@@ -79,18 +79,23 @@ export function MembershipMenu({
useEffect(() => {
if (shownStatus.current === status) return;
shownStatus.current = status;
const root = rootRef.current;
const at = document.activeElement;
// …unless a name is being typed into it meanwhile.
const parked = at === placed.current && !(at instanceof HTMLInputElement && at.value);
const lost = at == null || at === document.body || parked;
if (!root || !lost) return;
const target =
root.querySelector<HTMLElement>("[role=menuitemcheckbox]") ??
root.querySelector<HTMLElement>("input") ??
root.querySelector<HTMLElement>("button");
target?.focus();
placed.current = target;
// A frame later: rows that just mounted join the menu's list a render after this effect, and a
// row focused before that is not known to it — the arrows then did nothing from it.
const frame = requestAnimationFrame(() => {
const root = rootRef.current;
const at = document.activeElement;
// …unless a name is being typed into it meanwhile.
const parked = at === placed.current && !(at instanceof HTMLInputElement && at.value);
const lost = at == null || at === document.body || parked;
if (!root || !lost) return;
const target =
root.querySelector<HTMLElement>("[role=menuitemcheckbox]") ??
root.querySelector<HTMLElement>("input") ??
root.querySelector<HTMLElement>("button");
target?.focus();
placed.current = target;
});
return () => cancelAnimationFrame(frame);
}, [status]);
async function submit() {