components/listbox/listbox.ts

Functions

Imports

It imports no other module of this repo. Imported by components/command-menu/command-menu.ts, components/listbox/listbox.react.tsx, components/markdown-editor/markdown-editor.ts, components/select/select.ts, components/tree/tree.react.tsx, components/tree/tree.ts.

Source

1// The shared listbox: options, groups, one active option, filtering, typeahead and selection,
2// over `role="listbox"` markup. Command menu, select, and any list a person picks from reuse
3// it. No framework, no imports: the pure functions below run in node as well as the browser.
4//
5// The active option is the one a key press would act on. It is marked `data-active` and,
6// where focus stays elsewhere, named by `aria-activedescendant` on the holder. `aria-selected`
7// means one thing only: this value is chosen (single or multi selection).
8
9// ---------------------------------------------------------------------------------------
10// Pure functions.
11
12export interface Searchable {
13  label: string;
14  group?: string;
15  // Other words that find it: "home" finds Overview.
16  keywords?: readonly string[];
17}
18
19// Case-insensitive substring over the group, the label and the keywords, so the name of a
20// group finds all of it. An empty query matches all.
21export function matchesQuery(c: Searchable, query: string): boolean {
22  const needle = query.trim().toLowerCase();
23  if (!needle) return true;
24  return [c.group ?? "", c.label, ...(c.keywords ?? [])].some((t) => t.toLowerCase().includes(needle));
25}
26
27// A ranking hook: a score (higher first) for an item against the lower-cased, trimmed query,
28// or null to leave it out. Ties keep their order.
29export type Rank<T> = (item: T, needle: string) => number | null;
30
31// The items that match, in their own order; or, with a `rank`, the items it scores, best first.
32// The rank replaces the substring test, so it may match more loosely (a subsequence, say).
33export function filterCommands<T extends Searchable>(items: readonly T[], query: string, rank?: Rank<T>): T[] {
34  const needle = query.trim().toLowerCase();
35  if (!rank || !needle) return items.filter((c) => matchesQuery(c, query));
36  const scored: Array<{ item: T; at: number; score: number }> = [];
37  items.forEach((item, at) => {
38    const score = rank(item, needle);
39    if (score !== null) scored.push({ item, at, score });
40  });
41  return scored.sort((a, b) => b.score - a.score || a.at - b.at).map((s) => s.item);
42}
43
44// Items by group, in the order each group first appears. An item with no group falls under "".
45export function groupBy<T>(items: readonly T[], by: (item: T) => string | undefined = (i) => (i as { group?: string }).group): Array<{ group: string; items: T[] }> {
46  const out: Array<{ group: string; items: T[] }> = [];
47  for (const item of items) {
48    const key = by(item) ?? "";
49    let g = out.find((x) => x.group === key);
50    if (!g) {
51      g = { group: key, items: [] };
52      out.push(g);
53    }
54    g.items.push(item);
55  }
56  return out;
57}
58
59// Moves an index by `by`. Stops at the ends, or with `wrap` goes round. From no index (-1) a
60// forward move lands on the first and a backward move on the last.
61export function step(index: number, by: number, count: number, wrap = false): number {
62  if (count <= 0) return -1;
63  if (index < 0) return by > 0 ? 0 : count - 1;
64  const next = index + by;
65  if (wrap) return ((next % count) + count) % count;
66  return Math.min(count - 1, Math.max(0, next));
67}
68
69// `step` over a row where some entries cannot be chosen. A single step lands on the next
70// enabled entry in that direction (wrapping if asked); a longer step (a page) lands on the
71// enabled entry nearest its target. Returns the current index when there is nowhere to go,
72// and -1 when nothing is enabled.
73export function stepEnabled(disabled: readonly boolean[], index: number, by: number, wrap = false): number {
74  const n = disabled.length;
75  const first = disabled.indexOf(false);
76  if (first < 0) return -1;
77  if (index < 0) return by > 0 ? first : disabled.lastIndexOf(false);
78  const dir = by < 0 ? -1 : 1;
79  const w = wrap && Math.abs(by) === 1;
80  const scan = (from: number, d: number, round: boolean): number => {
81    for (let k = 0; k < n; k++) {
82      let i = from + d * k;
83      if (round) i = ((i % n) + n) % n;
84      else if (i < 0 || i >= n) return -1;
85      if (!disabled[i]) return i;
86    }
87    return -1;
88  };
89  const target = step(index, by, n, w);
90  let hit = scan(target, dir, w);
91  if (hit < 0 && Math.abs(by) > 1) hit = scan(target, -dir, false);
92  return hit < 0 ? index : hit;
93}
94
95export const TYPEAHEAD_MS = 700;
96
97export interface TypeaheadState {
98  buffer: string;
99  at: number;
100}
101
102// Typeahead over a list of labels (null for an entry that cannot be chosen). Characters
103// typed within `timeout` ms of each other make one prefix; the first match from the current
104// entry on wins, wrapping. One letter pressed again and again (or a single letter after a
105// pause) cycles through the entries that start with it. `index` is -1 when nothing matches.
106export function nextTypeahead(
107  state: TypeaheadState,
108  key: string,
109  now: number,
110  labels: ReadonlyArray<string | null>,
111  current: number,
112  timeout = TYPEAHEAD_MS,
113): { state: TypeaheadState; index: number } {
114  const buffer = (now - state.at > timeout ? "" : state.buffer) + key.toLowerCase();
115  const next = { buffer, at: now };
116  const n = labels.length;
117  const cycle = buffer.length === 1 || [...buffer].every((c) => c === buffer[0]);
118  const needle = cycle ? (buffer[0] ?? "") : buffer;
119  const from = cycle ? current + 1 : Math.max(current, 0);
120  for (let k = 0; k < n; k++) {
121    const label = labels[(from + k) % n];
122    if (label != null && label.trimStart().toLowerCase().startsWith(needle)) return { state: next, index: (from + k) % n };
123  }
124  return { state: next, index: -1 };
125}
126
127// The words a polite live region says after filtering.
128export function resultsText(count: number): string {
129  return count === 1 ? "1 result" : `${count} results`;
130}
131
132export function emptyText(query: string): string {
133  return `No results for “${query.trim()}”`;
134}
135
136// ---------------------------------------------------------------------------------------
137// The controller.
138
139export type ListboxMode =
140  // Focus stays in a combobox input; the input names the active option (aria-activedescendant).
141  | "input"
142  // Focus is on the listbox, which names the active option (aria-activedescendant).
143  | "descendant"
144  // Focus moves to the options themselves (roving tabindex).
145  | "roving";
146export type Selection = "none" | "single" | "multi";
147
148export interface ListboxOptions {
149  // The combobox input that holds focus. Setting it makes the mode "input".
150  input?: HTMLInputElement | null;
151  mode?: ListboxMode;
152  selection?: Selection;
153  // Up from the first goes to the last, and the reverse. Off by default.
154  wrap?: boolean;
155  // Typing letters moves to a matching option. On unless an input holds focus.
156  typeahead?: boolean;
157  // With an input, Home and End move the caret unless this is set (the command menu sets it).
158  homeEnd?: boolean;
159  // With an input: typing in it filters the listbox. Needs `filter` to be called by the app
160  // otherwise.
161  filterInput?: boolean;
162  // Makes the first enabled option active after filtering. On with an input.
163  activateFirst?: boolean;
164  // Hide the listbox while nothing matches. On.
165  hideWhenEmpty?: boolean;
166  rank?: Rank<ListboxItem>;
167  // The element that receives "No results for ...". Found as a sibling `.cap-listbox-empty`.
168  empty?: HTMLElement | null;
169  // The polite live region for the result count. Made after the listbox when not given.
170  status?: HTMLElement | null;
171  announce?: (count: number, query: string) => string;
172  // Options moved per Page Up or Page Down. Measured from the list's height when omitted.
173  pageSize?: number;
174  onActive?: (option: HTMLElement | null) => void;
175  onFilter?: (count: number, query: string) => void;
176}
177
178export interface ListboxItem extends Searchable {
179  el: HTMLElement;
180  id: string;
181  value: string;
182  disabled: boolean;
183  selected: boolean;
184}
185
186export interface SelectDetail {
187  option: HTMLElement;
188  value: string;
189  label: string;
190  // Whether the option is chosen after this (always true when selection is "none").
191  selected: boolean;
192  // Every chosen value after this.
193  values: string[];
194}
195
196export interface Listbox {
197  readonly el: HTMLElement;
198  readonly mode: ListboxMode;
199  items(): ListboxItem[];
200  // The options a person can reach: those not hidden by a filter.
201  visible(): ListboxItem[];
202  active(): HTMLElement | null;
203  setActive(target: HTMLElement | number | null, o?: { scroll?: boolean; focus?: boolean }): void;
204  // Moves the active option: step(1) next, step(-1) previous, skipping disabled ones.
205  step(by: number): void;
206  first(): void;
207  last(): void;
208  // Shows the options that match and returns how many. Announces the count.
209  filter(query: string, rank?: Rank<ListboxItem>): number;
210  // Chooses (or with selection "none", just reports) the active or the given option.
211  select(target?: HTMLElement | null): void;
212  getValue(): string[];
213  setValue(value: string | readonly string[] | null): void;
214  // Puts focus where the listbox takes keys (the input, the list, or the active option).
215  focus(): void;
216  // Handles a key as the listbox would; returns true when it did. For an app that owns the
217  // keydown listener itself.
218  handleKey(e: KeyboardEvent): boolean;
219  // Re-reads the markup after the app changed it.
220  refresh(): void;
221  detach(): void;
222}
223
224let counter = 0;
225const uid = (p: string) => `${p}-${++counter}`;
226
227const isDisabled = (o: HTMLElement) => o.getAttribute("aria-disabled") === "true" || o.hasAttribute("data-disabled");
228
229export function createListbox(el: HTMLElement, opts: ListboxOptions = {}): Listbox {
230  const input = opts.input ?? null;
231  const mode: ListboxMode = input ? "input" : (opts.mode ?? (el.dataset.mode as ListboxMode | undefined) ?? "descendant");
232  const selection: Selection = opts.selection ?? (el.getAttribute("aria-multiselectable") === "true" ? "multi" : ((el.dataset.selection as Selection | undefined) ?? "none"));
233  const typeaheadOn = opts.typeahead ?? mode !== "input";
234  const activateFirst = opts.activateFirst ?? mode === "input";
235  const hideWhenEmpty = opts.hideWhenEmpty ?? true;
236  const wrap = opts.wrap ?? el.dataset.wrap !== undefined;
237  const holder: HTMLElement = input ?? el;
238
239  el.dataset.mode = mode;
240  el.dataset.selection = selection;
241  if (selection === "multi") el.setAttribute("aria-multiselectable", "true");
242  if (mode === "descendant" && !el.hasAttribute("tabindex")) el.tabIndex = 0;
243
244  const parent = el.parentElement;
245  const empty = opts.empty ?? parent?.querySelector<HTMLElement>(":scope > .cap-listbox-empty") ?? null;
246  let madeStatus: HTMLElement | null = null;
247  let status = opts.status ?? parent?.querySelector<HTMLElement>(":scope > [data-cap-part='count']") ?? null;
248  if (!status) {
249    status = document.createElement("div");
250    status.className = "cap-sr-only";
251    status.dataset.capPart = "count";
252    status.setAttribute("role", "status");
253    status.setAttribute("aria-atomic", "true");
254    el.after(status);
255    madeStatus = status;
256  }
257  const announce = opts.announce ?? ((n: number) => (n === 0 && empty ? "" : n === 0 ? "No results" : resultsText(n)));
258
259  const optionEls = () => Array.from(el.querySelectorAll<HTMLElement>("[role='option']"));
260  const order = new WeakMap<HTMLElement, number>();
261  const ensureId = (o: HTMLElement) => (o.id ||= uid("cap-opt"));
262  const labelOf = (o: HTMLElement) => (o.dataset.label ?? o.querySelector(".cap-option-label")?.textContent ?? o.textContent ?? "").trim();
263  const groupOf = (o: HTMLElement) => {
264    if (o.dataset.group !== undefined) return o.dataset.group;
265    const g = o.closest<HTMLElement>("[role='group']");
266    return g && el.contains(g) ? (g.querySelector(".cap-listbox-label")?.textContent ?? "").trim() : "";
267  };
268  const info = (o: HTMLElement): ListboxItem => ({
269    el: o,
270    id: ensureId(o),
271    value: o.dataset.value ?? o.id,
272    label: labelOf(o),
273    group: groupOf(o),
274    keywords: (o.dataset.keywords ?? "").split(",").map((k) => k.trim()).filter(Boolean),
275    disabled: isDisabled(o),
276    selected: o.getAttribute("aria-selected") === "true",
277  });
278  const items = () => optionEls().map(info);
279  const visible = () => items().filter((i) => !i.el.hidden);
280  const enabledVisible = () => visible().filter((i) => !i.disabled);
281
282  optionEls().forEach((o, i) => {
283    order.set(o, i);
284    ensureId(o);
285    if (selection !== "none" && !o.hasAttribute("aria-selected")) o.setAttribute("aria-selected", "false");
286  });
287
288  // ---- the active option
289  let current: HTMLElement | null = el.querySelector<HTMLElement>("[role='option'][data-active]");
290
291  const syncRoving = () => {
292    if (mode !== "roving") return;
293    const vis = enabledVisible();
294    const stop = (current && !current.hidden && !isDisabled(current) ? current : null) ?? vis.find((i) => i.selected)?.el ?? vis[0]?.el ?? null;
295    for (const o of optionEls()) o.tabIndex = o === stop ? 0 : -1;
296  };
297
298  const setActive: Listbox["setActive"] = (target, o = {}) => {
299    const { scroll = true, focus = false } = o;
300    const to = typeof target === "number" ? (visible()[target]?.el ?? null) : target;
301    const prev = current;
302    current = to;
303    if (prev && prev !== to) prev.removeAttribute("data-active");
304    if (to) {
305      to.setAttribute("data-active", "");
306      if (mode === "roving") {
307        syncRoving();
308        if (focus) to.focus({ preventScroll: true });
309      } else holder.setAttribute("aria-activedescendant", ensureId(to));
310      if (scroll) {
311        // The first option scrolls its group's label into view with it.
312        if (visible()[0]?.el === to) el.scrollTop = 0;
313        else to.scrollIntoView({ block: "nearest" });
314      }
315    } else {
316      if (mode !== "roving") holder.removeAttribute("aria-activedescendant");
317      else syncRoving();
318    }
319    if (prev !== to) opts.onActive?.(to);
320  };
321
322  const move = (to: number, focus: boolean) => {
323    const vis = visible();
324    if (to >= 0 && vis[to]) setActive(vis[to].el, { focus });
325  };
326  const currentIndex = () => (current ? visible().findIndex((i) => i.el === current) : -1);
327  const stepBy = (by: number) => {
328    const vis = visible();
329    move(stepEnabled(vis.map((i) => i.disabled), currentIndex(), by, wrap), mode === "roving");
330  };
331  const edge = (end: boolean) => {
332    const vis = visible();
333    const disabled = vis.map((i) => i.disabled);
334    move(end ? disabled.lastIndexOf(false) : disabled.indexOf(false), mode === "roving");
335  };
336
337  // ---- selection
338  const getValue = () => (selection === "none" ? [] : items().filter((i) => i.selected).map((i) => i.value));
339  const select = (target: HTMLElement | null = current) => {
340    if (!target || isDisabled(target)) return;
341    if (selection === "single") for (const o of optionEls()) o.setAttribute("aria-selected", String(o === target));
342    else if (selection === "multi") target.setAttribute("aria-selected", String(target.getAttribute("aria-selected") !== "true"));
343    syncRoving();
344    const it = info(target);
345    const detail: SelectDetail = { option: target, value: it.value, label: it.label, selected: selection === "none" || it.selected, values: getValue() };
346    el.dispatchEvent(new CustomEvent("cap:option-select", { bubbles: true, detail }));
347  };
348  const setValue: Listbox["setValue"] = (value) => {
349    if (selection === "none") return;
350    const want = new Set(value === null ? [] : typeof value === "string" ? [value] : value);
351    let any = false;
352    for (const i of items()) {
353      const on = want.has(i.value) && (selection === "multi" || !any);
354      if (on) any = true;
355      i.el.setAttribute("aria-selected", String(on));
356    }
357    syncRoving();
358  };
359
360  // ---- filtering
361  const filter: Listbox["filter"] = (query, rank = opts.rank) => {
362    const all = items();
363    const keep = new Set(filterCommands(all, query, rank).map((i) => i.el));
364    // A ranked list reorders within each parent; with no query it goes back to its own order.
365    if (rank) {
366      const ranked = filterCommands(all, query, rank);
367      const pos = new Map(ranked.map((i, k) => [i.el, k]));
368      const byParent = new Map<Element, HTMLElement[]>();
369      for (const o of all.map((i) => i.el)) byParent.set(o.parentElement ?? el, [...(byParent.get(o.parentElement ?? el) ?? []), o]);
370      for (const [p, list] of byParent) {
371        list.sort((a, b) => (query.trim() ? (pos.get(a) ?? 1e9) - (pos.get(b) ?? 1e9) : (order.get(a) ?? 0) - (order.get(b) ?? 0)));
372        for (const o of list) p.append(o);
373      }
374    }
375    for (const i of all) i.el.hidden = !keep.has(i.el);
376    for (const g of el.querySelectorAll<HTMLElement>("[role='group']")) g.hidden = !g.querySelector("[role='option']:not([hidden])");
377    // A separator shows only between two things that show.
378    let seen = false;
379    let pending: HTMLElement | null = null;
380    for (const c of Array.from(el.children) as HTMLElement[]) {
381      if (c.classList.contains("cap-listbox-separator")) {
382        c.hidden = true;
383        if (seen) pending = c;
384      } else if (!c.hidden && (c.matches("[role='option']") || c.querySelector("[role='option']:not([hidden])"))) {
385        if (pending) pending.hidden = false;
386        pending = null;
387        seen = true;
388      }
389    }
390    const n = keep.size;
391    if (hideWhenEmpty) el.hidden = n === 0;
392    if (empty) empty.textContent = n === 0 && query.trim() ? emptyText(query) : "";
393    if (status) status.textContent = query.trim() ? announce(n, query) : "";
394    if (current && (current.hidden || isDisabled(current))) setActive(null);
395    if (activateFirst) setActive(enabledVisible()[0]?.el ?? null, { scroll: false });
396    else syncRoving();
397    opts.onFilter?.(n, query);
398    return n;
399  };
400
401  // ---- keys
402  let typed: TypeaheadState = { buffer: "", at: 0 };
403  const pageBy = () => {
404    if (opts.pageSize) return opts.pageSize;
405    const row = visible()[0]?.el.offsetHeight ?? 0;
406    return row > 0 ? Math.max(1, Math.floor(el.clientHeight / row) - 1) : 10;
407  };
408
409  const handleKey = (e: KeyboardEvent): boolean => {
410    if (e.defaultPrevented || e.isComposing || e.ctrlKey || e.metaKey || e.altKey) return false;
411    const k = e.key;
412    const roving = mode === "roving";
413    const typing = typeaheadOn && Date.now() - typed.at <= TYPEAHEAD_MS && typed.buffer !== "";
414    let handled = true;
415    if (k === "ArrowDown") stepBy(1);
416    else if (k === "ArrowUp") stepBy(-1);
417    else if (k === "PageDown") move(stepEnabled(visible().map((i) => i.disabled), currentIndex(), pageBy()), roving);
418    else if (k === "PageUp") move(stepEnabled(visible().map((i) => i.disabled), currentIndex(), -pageBy()), roving);
419    else if ((k === "Home" || k === "End") && (mode !== "input" || opts.homeEnd)) edge(k === "End");
420    else if (k === "Enter") {
421      if (!current) return false;
422      select(current);
423    } else if (k === " " && mode !== "input" && !typing) {
424      if (!current) return false;
425      select(current);
426    } else if (typeaheadOn && k.length === 1 && (k !== " " || typing)) {
427      const vis = visible();
428      const r = nextTypeahead(typed, k, Date.now(), vis.map((i) => (i.disabled ? null : i.label)), currentIndex());
429      typed = r.state;
430      if (r.index >= 0) move(r.index, roving);
431    } else handled = false;
432    if (handled) e.preventDefault();
433    return handled;
434  };
435
436  // ---- wiring
437  const onKey = (e: KeyboardEvent) => void handleKey(e);
438  const optionAt = (e: Event) => {
439    const o = (e.target as Element | null)?.closest<HTMLElement>("[role='option']") ?? null;
440    return o && el.contains(o) ? o : null;
441  };
442  const onMove = (e: PointerEvent) => {
443    const o = optionAt(e);
444    if (o && o !== current && !isDisabled(o)) setActive(o, { scroll: false });
445  };
446  const onDown = (e: PointerEvent) => {
447    // A click on an option must not take focus from the input.
448    if (mode === "input" && optionAt(e)) e.preventDefault();
449  };
450  const onClick = (e: MouseEvent) => {
451    const o = optionAt(e);
452    if (!o || isDisabled(o)) return;
453    setActive(o, { scroll: false, focus: mode === "roving" });
454    select(o);
455  };
456  const onFocusIn = (e: FocusEvent) => {
457    const o = optionAt(e);
458    if (o && mode === "roving" && o !== current) setActive(o, { scroll: false });
459  };
460  const onFocus = () => {
461    if (current) return;
462    const vis = enabledVisible();
463    setActive((vis.find((i) => i.selected) ?? vis[0])?.el ?? null);
464  };
465  const onInput = () => void filter(input?.value ?? "");
466
467  (input ?? el).addEventListener("keydown", onKey as EventListener);
468  el.addEventListener("pointermove", onMove as EventListener);
469  el.addEventListener("pointerdown", onDown as EventListener);
470  el.addEventListener("click", onClick as EventListener);
471  if (mode === "roving") el.addEventListener("focusin", onFocusIn as EventListener);
472  if (mode === "descendant") el.addEventListener("focus", onFocus);
473  if (input && opts.filterInput) input.addEventListener("input", onInput);
474
475  if (current) setActive(current, { scroll: false });
476  else if (activateFirst) setActive(enabledVisible()[0]?.el ?? null, { scroll: false });
477  syncRoving();
478
479  return {
480    el,
481    mode,
482    items,
483    visible,
484    active: () => current,
485    setActive,
486    step: stepBy,
487    first: () => edge(false),
488    last: () => edge(true),
489    filter,
490    select,
491    getValue,
492    setValue,
493    focus() {
494      if (mode === "input") input?.focus();
495      else if (mode === "descendant") {
496        el.focus({ preventScroll: true });
497        onFocus();
498      } else {
499        if (!current) {
500          const vis = enabledVisible();
501          setActive((vis.find((i) => i.selected) ?? vis[0])?.el ?? null, { focus: true });
502        } else current.focus({ preventScroll: true });
503      }
504    },
505    handleKey,
506    refresh() {
507      optionEls().forEach((o, i) => {
508        if (!order.has(o)) order.set(o, i);
509        ensureId(o);
510        if (selection !== "none" && !o.hasAttribute("aria-selected")) o.setAttribute("aria-selected", "false");
511      });
512      if (current && !el.contains(current)) current = null;
513      syncRoving();
514    },
515    detach() {
516      (input ?? el).removeEventListener("keydown", onKey as EventListener);
517      el.removeEventListener("pointermove", onMove as EventListener);
518      el.removeEventListener("pointerdown", onDown as EventListener);
519      el.removeEventListener("click", onClick as EventListener);
520      el.removeEventListener("focusin", onFocusIn as EventListener);
521      el.removeEventListener("focus", onFocus);
522      input?.removeEventListener("input", onInput);
523      madeStatus?.remove();
524      delete el.dataset.capReady;
525      listboxes.delete(el);
526    },
527  };
528}
529
530// ---------------------------------------------------------------------------------------
531// Markup wiring: `[data-cap="listbox"]`.
532
533const listboxes = new WeakMap<HTMLElement, Listbox>();
534
535// The controller `enhance` made for this element, if any.
536export function listboxFor(el: Element | null): Listbox | undefined {
537  return el instanceof HTMLElement ? listboxes.get(el) : undefined;
538}
539
540// Attaches to every `[data-cap="listbox"]` under root not yet marked `data-cap-ready`.
541// Reads data-mode ("input" is found by the combobox whose aria-controls names this list),
542// data-selection ("single", "multi"), data-wrap, and data-filter (typing in the input filters).
543// Returns a function that detaches them all.
544export function enhance(root: ParentNode = document): () => void {
545  const undo: Array<() => void> = [];
546  for (const el of root.querySelectorAll<HTMLElement>("[data-cap='listbox']:not([data-cap-ready])")) {
547    el.dataset.capReady = "";
548    const input = el.id ? (document.querySelector<HTMLInputElement>(`input[aria-controls~="${CSS.escape(el.id)}"]`) ?? null) : null;
549    const lb = createListbox(el, { input, filterInput: input !== null && el.dataset.filter !== undefined });
550    listboxes.set(el, lb);
551    undo.push(lb.detach);
552  }
553  return () => undo.forEach((f) => f());
554}