cursedbelt 5.90.0 → 5.92.0

package/src/react/components/DataTable/columnHeaders.spec.tsx

@@ -0,0 +1,83 @@
+import { afterEach, beforeAll, describe, expect, test } from 'bun:test';
+import { cleanup, fireEvent, render } from '@testing-library/react';
+import { useState } from 'react';
+import { DataTable, preloadDataTableParts } from './DataTable.js';
+import type { ColDef } from './types.js';
+
+// `columnHeaders={false}` — the owner, 2026-10-23, on music's tracks: *"remove the row of table
+// headers like "TITLE" because it will save space"*. The row is collapsed, not deleted: its
+// widths and its screen-reader names stay, and what a reader acts on in it moves.
+beforeAll(preloadDataTableParts);
+afterEach(cleanup);
+
+interface Song extends Record<string, unknown> {
+  id: string;
+  title: string;
+  seconds: number;
+}
+const COLUMNS: ColDef<Song>[] = [
+  { key: 'title', label: 'Title', type: 'text', sortable: true },
+  { key: 'seconds', label: 'Length', type: 'number', sortable: true, width: 80 },
+];
+const SONGS: Song[] = [
+  { id: 's1', title: 'Alpha', seconds: 10 },
+  { id: 's2', title: 'Beta', seconds: 20 },
+];
+
+function Picking({ columnHeaders }: { columnHeaders: boolean }) {
+  const [selected, setSelected] = useState<ReadonlySet<string>>(new Set());
+  return (
+    <DataTable
+      columnHeaders={columnHeaders}
+      columns={COLUMNS}
+      data={SONGS}
+      getRowId={(row) => row.id}
+      mobileCards={false}
+      onSelectionChange={setSelected}
+      selectedIds={selected}
+      stickyHeader
+    />
+  );
+}
+
+describe('DataTable columnHeaders={false}', () => {
+  test('🔴 no column name is DRAWN, and no sort button stands in the row', () => {
+    const { container } = render(<Picking columnHeaders={false} />);
+    const ths = [...container.querySelectorAll('thead th')];
+    expect(ths.length).toBe(COLUMNS.length + 1);
+    for (const th of ths) {
+      // Every cell is a zero-height cell whose only content is an sr-only name.
+      expect(th.className).toContain('h-0');
+      expect(th.className).not.toContain('sticky');
+      for (const child of th.children) expect(child.className).toContain('sr-only');
+    }
+    expect(container.querySelector('thead button')).toBeNull();
+    expect(container.querySelector('thead [role="checkbox"]')).toBeNull();
+  });
+
+  test('the names are still there for a screen reader, and the widths for the column tracks', () => {
+    const { container } = render(<Picking columnHeaders={false} />);
+    const names = [...container.querySelectorAll('thead th[scope="col"]')].map((th) => th.textContent);
+    expect(names).toEqual(['Select', 'Title', 'Length']);
+    const length = [...container.querySelectorAll('thead th')].find((th) => th.textContent === 'Length') as HTMLElement;
+    expect(length.style.width).toBe('80px');
+  });
+
+  test('select-all moves to its own line above the rows, and still selects', () => {
+    const { container } = render(<Picking columnHeaders={false} />);
+    const line = container.querySelector('[data-cb-table-select-all]') as HTMLElement;
+    expect(line).not.toBeNull();
+    // Shown at every width, not only under the phone breakpoint.
+    expect(line.className).not.toContain('@xl:hidden');
+    fireEvent.click(line.querySelector('[role="checkbox"]') as HTMLElement);
+    expect(container.querySelectorAll('tbody [role="checkbox"][aria-checked="true"]').length).toBe(SONGS.length);
+  });
+
+  test('the default draws the row exactly as before', () => {
+    const { container } = render(<Picking columnHeaders />);
+    expect(container.querySelector('thead button')).not.toBeNull();
+    expect(container.querySelector('thead [role="checkbox"]')).not.toBeNull();
+    expect(container.querySelector('thead th')?.className).toContain('sticky');
+    expect(container.querySelector('[data-cb-table-select-all]')).toBeNull();
+  });
+});

package/src/react/components/Drawer.tsx

@@ -33,6 +33,13 @@ export interface DrawerProps {
   open: boolean;
   onClose: () => void;
   title?: ReactNode;
+  /**
+   * Icon controls on the title's line, before Close — a sidebar drawer's utilities (help, theme,
+   * account, collapse-all), where an app with no top bar keeps them on a phone (owner,
+   * 2026-10-23, music: *"Put all the other header buttons in the side menu"*). One line, so the
+   * drawer spends no second row on them.
+   */
+  actions?: ReactNode;
   /** Width on a left/right drawer, height on a bottom drawer. */
   size?: DrawerSize;
   side?: DrawerSide;
@@ -74,6 +81,7 @@ export function Drawer({
   open,
   onClose,
   title,
+  actions,
   size = 'md',
   side = 'right',
   isDirty,
@@ -149,6 +157,11 @@ export function Drawer({
             ) : (
               <DialogTitle className='sr-only'>Panel</DialogTitle>
             )}
+            {actions ? (
+              <div data-cb-drawer-actions='' className='flex shrink-0 items-center gap-0.5'>
+                {actions}
+              </div>
+            ) : null}
             <IconButton label='Close' onClick={guardedClose}>
               <X />
             </IconButton>

package/src/react/components/FileDropZone.tsx

@@ -2,6 +2,7 @@ import { Upload, X } from 'lucide-react';
 import { type DragEvent, type ReactNode, useId, useRef, useState } from 'react';
 import { cn } from '../lib/cn.js';
 import { Button } from './Button.js';
+import { isHiddenName, matchesAccept, walkDrop } from './dropTransfer.js';
 import { Input } from './Input.js';
 
 export interface FileDropZoneProps {
@@ -51,102 +52,30 @@ export interface FileDropZoneProps {
   className?: string;
 }
 
-/** The slice of the File and Directory Entries API a drop needs — every browser ships it. */
-interface DropEntry {
-  isFile: boolean;
-  isDirectory: boolean;
-  name: string;
-  file?: (ok: (file: File) => void, fail: (error: unknown) => void) => void;
-  createReader?: () => {
-    readEntries: (ok: (entries: DropEntry[]) => void, fail: (error: unknown) => void) => void;
-  };
-}
-
-/** What a folder can hold before walking it stops — a drop, not a disk scan. */
-const MAX_FOLDER_FILES = 5000;
-
-const isHidden = (name: string) => name.startsWith('.');
-
-/**
- * Every file under `entry`, depth-first. A directory's reader answers in batches until empty.
- *
- * Each file carries its path from the dropped folder in `webkitRelativePath` (`Album/CD1/01.mp3`),
- * exactly as a folder PICKER's files do natively — so an app reading provenance (music defaults
- * its "where these came from" field to the top folder) gets the same answer from both gestures.
- * A drop leaves it `''` otherwise, and that difference is what kept music on its own walk.
- */
-async function filesUnder(entry: DropEntry, out: File[], prefix = ''): Promise<void> {
-  if (out.length >= MAX_FOLDER_FILES || isHidden(entry.name)) return;
-  if (entry.isFile && entry.file) {
-    const read = entry.file.bind(entry);
-    const file = await new Promise<File>((ok, fail) => read(ok, fail));
-    Object.defineProperty(file, 'webkitRelativePath', { value: `${prefix}${file.name}`, configurable: true });
-    out.push(file);
-    return;
-  }
-  if (!entry.isDirectory || !entry.createReader) return;
-  const reader = entry.createReader();
-  while (out.length < MAX_FOLDER_FILES) {
-    const batch = await new Promise<DropEntry[]>((ok, fail) => reader.readEntries(ok, fail));
-    if (batch.length === 0) return;
-    for (const child of batch) await filesUnder(child, out, `${prefix}${entry.name}/`);
-  }
-}
-
 /**
  * A drop's files, with every dropped FOLDER replaced by the accepted files inside it — see the
  * FOLDER section above. `null` when nothing in the drop is a folder, so the ordinary path stays
- * exactly `dataTransfer.files`.
- *
- * 🔴 The entries are taken SYNCHRONOUSLY, before the first `await`: a browser empties the
- * `DataTransfer` once the drop event returns.
+ * exactly `dataTransfer.files`. The walk itself is {@link walkDrop}, shared with every app's own
+ * drop target through {@link filesFromDataTransfer}.
  */
 function folderAwareDrop(
   transfer: DataTransfer,
   accept: string | undefined,
 ): Promise<{ loose: File[]; fromFolders: File[]; emptyFolders: File[] }> | null {
-  const items = transfer.items ? [...transfer.items] : [];
-  const entries = items.map((item) =>
-    item.kind === 'file' && typeof item.webkitGetAsEntry === 'function'
-      ? (item.webkitGetAsEntry() as DropEntry | null)
-      : null,
-  );
-  if (!entries.some((entry) => entry?.isDirectory)) return null;
-  const looseFiles = [...transfer.files];
-  return (async () => {
-    const loose: File[] = [];
+  const walking = walkDrop(transfer);
+  if (!walking) return null;
+  return walking.then(({ loose, folders }) => {
     const fromFolders: File[] = [];
     const emptyFolders: File[] = [];
-    for (const [i, entry] of entries.entries()) {
-      if (!entry?.isDirectory) {
-        const file = looseFiles[i] ?? (entry ? await new Promise<File | null>((ok) => entry.file?.(ok, () => ok(null))) : null);
-        if (file) loose.push(file);
-        continue;
-      }
-      const inside: File[] = [];
-      try {
-        await filesUnder(entry, inside);
-      } catch {
-        // An unreadable folder yields what was read before the error — and, if that is nothing, a refusal below.
-      }
-      const kept = inside.filter((f) => matchesAccept(f, accept));
+    for (const folder of folders) {
+      // A folder that yields nothing acceptable is a refusal under its own name, never silence.
+      const kept = folder.files.filter((f) => matchesAccept(f, accept));
       if (kept.length > 0) fromFolders.push(...kept);
-      else emptyFolders.push(new File([], entry.name));
+      else emptyFolders.push(new File([], folder.name));
     }
     return { loose, fromFolders, emptyFolders };
-  })();
-}
-
-const matchesAccept = (file: File, accept?: string): boolean => {
-  if (!accept) return true;
-  return accept.split(',').some((raw) => {
-    const rule = raw.trim().toLowerCase();
-    if (!rule) return false;
-    if (rule.startsWith('.')) return file.name.toLowerCase().endsWith(rule);
-    if (rule.endsWith('/*')) return file.type.toLowerCase().startsWith(rule.slice(0, -1));
-    return file.type.toLowerCase() === rule;
   });
-};
+}
 
 /**
  * A folder PICKER's files, judged the way a dropped folder's are: what `accept` turns away is
@@ -156,7 +85,7 @@ const matchesAccept = (file: File, accept?: string): boolean => {
  */
 function folderPick(list: FileList | null, accept: string | undefined): { fromFolders: File[]; emptyFolders: File[] } {
   const all = list ? [...list] : [];
-  const kept = all.filter((f) => !f.webkitRelativePath.split('/').some(isHidden) && matchesAccept(f, accept));
+  const kept = all.filter((f) => !f.webkitRelativePath.split('/').some(isHiddenName) && matchesAccept(f, accept));
   if (kept.length > 0 || all.length === 0) return { fromFolders: kept, emptyFolders: [] };
   const name = all[0]?.webkitRelativePath.split('/')[0] || 'That folder';
   return { fromFolders: [], emptyFolders: [new File([], name)] };

package/src/react/components/Modal.spec.tsx

@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, test } from 'bun:test';
 import { cleanup, fireEvent, render, waitFor } from '@testing-library/react';
 import { confirm } from '../confirm.js';
+import { Button } from './Button.js';
 import { ConfirmDialog } from './ConfirmDialog.js';
 import { Drawer } from './Drawer.js';
 import { Input } from './Input.js';
@@ -336,6 +337,19 @@ describe('Drawer', () => {
     expect(panel?.className).toContain('max-h-[var(--sheet-h-lg)]');
   });
 
+  test('`actions` stand on the title line, before Close (a phone sidebar keeps its utilities there)', () => {
+    render(
+      <Drawer actions={<Button tooltip='Help'>Help</Button>} open onClose={() => {}} side='left' title='Music'>
+        x
+      </Drawer>,
+    );
+    const slot = document.querySelector('[data-cb-drawer-actions]') as HTMLElement;
+    expect(slot.textContent).toBe('Help');
+    const close = document.querySelector('[data-cb-drawer-handle] button[aria-label="Close"]') as HTMLElement;
+    expect(slot.compareDocumentPosition(close) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    expect(slot.parentElement).toBe(close.parentElement);
+  });
+
   test('left side: slides in from the left', () => {
     render(
       <Drawer open onClose={() => {}} side='left' title='Palette'>

package/src/react/components/Page.spec.tsx

@@ -1,5 +1,6 @@
 import { afterEach, describe, expect, test } from 'bun:test';
 import { cleanup, fireEvent, render } from '@testing-library/react';
+import { Button } from './Button.js';
 import { GuideRoute, GuideSection } from './Guide.js';
 import { PageContainer, PageHeader, ReadableColumn } from './Page.js';
 
@@ -58,6 +59,25 @@ describe('PageHeader — NAV-11: one h1, a one-line subtitle', () => {
     expect(container.querySelector('[data-cb-page-subtitle] button')).toBeNull();
   });
 
+  test('`leading` stands before the title on its line, OUTSIDE the heading', () => {
+    // The phone's sidebar button in an app with no top bar (owner, 2026-10-23, music).
+    const { container } = render(
+      <PageHeader leading={<Button tooltip='Open the sidebar'>Open the sidebar</Button>} title='Queue' />,
+    );
+    const h1 = container.querySelector('h1') as HTMLElement;
+    expect(h1.textContent).toBe('Queue');
+    const slot = container.querySelector('[data-cb-page-header-leading]') as HTMLElement;
+    expect(slot.textContent).toBe('Open the sidebar');
+    expect(slot.contains(h1)).toBe(false);
+    // Before the title, in document order.
+    expect(slot.compareDocumentPosition(h1) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+
+  test('no `leading`, no slot', () => {
+    const { container } = render(<PageHeader title='Queue' />);
+    expect(container.querySelector('[data-cb-page-header-leading]')).toBeNull();
+  });
+
   test('🔴 a subtitle wider than its line gets an InfoHint carrying the whole text', () => {
     const proto = HTMLElement.prototype;
     const scroll = Object.getOwnPropertyDescriptor(proto, 'scrollWidth');

package/src/react/components/Page.tsx

@@ -100,6 +100,14 @@ export function ReadableColumn({ className, ...p }: HTMLAttributes<HTMLDivElemen
 
 export interface PageHeaderProps {
   title: ReactNode;
+  /**
+   * One control BEFORE the title, on its line and outside the heading — the phone's sidebar button,
+   * where an app with no top bar keeps its way into the sidebar (owner, 2026-10-23, music: *"put the
+   * sidebar opening icon for small views to be to the left of the folder or section name … There
+   * will not be a top header row anymore"*; Linear's and Slack's phone layouts). Outside the `h1`,
+   * so the heading's name is the title alone.
+   */
+  leading?: ReactNode;
   /**
    * Inline telemetry beside the title — metric pills (`Badge`/`StatusPill`, e.g.
    * `19 apps` `1 running`), never a raw muted-text counter string that disappears
@@ -154,6 +162,7 @@ const SHORT_LANDSCAPE_TITLE = '[@media(orientation:landscape)_and_(max-height:50
  */
 export function PageHeader({
   title,
+  leading,
   subtitle,
   meta,
   actions,
@@ -167,6 +176,23 @@ export function PageHeader({
 }: PageHeaderProps) {
   const Heading = level === 2 ? 'h2' : 'h1';
   const inContainer = useContext(InPageContainer);
+  const titleBlock = (
+    <div className='min-w-0'>
+      <div className='flex min-w-0 flex-wrap items-baseline gap-x-3 gap-y-1'>
+        <Heading
+          className={cn(
+            'font-bold tracking-tight text-foreground',
+            dense ? 'text-h3' : cn('text-h1', SHORT_LANDSCAPE_TITLE),
+            !titleOnMobile && 'hidden sm:block',
+          )}
+        >
+          {title}
+        </Heading>
+        {meta && <span className='flex flex-wrap items-center gap-1.5'>{meta}</span>}
+      </div>
+      {subtitle && <PageSubtitle dense={dense}>{subtitle}</PageSubtitle>}
+    </div>
+  );
   return (
     <Split
       {...rest}
@@ -184,21 +210,16 @@ export function PageHeader({
         className,
       )}
     >
-      <div className='min-w-0'>
-        <div className='flex min-w-0 flex-wrap items-baseline gap-x-3 gap-y-1'>
-          <Heading
-            className={cn(
-              'font-bold tracking-tight text-foreground',
-              dense ? 'text-h3' : cn('text-h1', SHORT_LANDSCAPE_TITLE),
-              !titleOnMobile && 'hidden sm:block',
-            )}
-          >
-            {title}
-          </Heading>
-          {meta && <span className='flex flex-wrap items-center gap-1.5'>{meta}</span>}
+      {leading != null ? (
+        <div className='flex min-w-0 items-center gap-2'>
+          <span data-cb-page-header-leading='' className='flex shrink-0 items-center'>
+            {leading}
+          </span>
+          {titleBlock}
         </div>
-        {subtitle && <PageSubtitle dense={dense}>{subtitle}</PageSubtitle>}
-      </div>
+      ) : (
+        titleBlock
+      )}
       {(actions || guide) && (
         <div className='flex items-center gap-2'>
           {guide ? <PageGuideButton>{guide}</PageGuideButton> : null}

package/src/react/components/TagsInput.spec.tsx

@@ -1,7 +1,9 @@
-import { afterEach, describe, expect, test } from 'bun:test';
-import { cleanup, fireEvent, render } from '@testing-library/react';
+import { afterEach, beforeAll, describe, expect, test } from 'bun:test';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { act, cleanup, fireEvent, render, waitFor } from '@testing-library/react';
 import { useState } from 'react';
-import { TagsInput } from './TagsInput.js';
+import { preloadSuggestingTagsInput, TagsInput } from './TagsInput.js';
 
 afterEach(cleanup);
 
@@ -80,17 +82,76 @@ describe('TagsInput', () => {
   });
 });
 
+/**
+ * 🔴 Never a `<datalist>` (forge task 3602). The owner, 2026-10-23: *"the dropdown does not look
+ * styled … I was in dark mode and it popped up light"* — the browser draws a datalist outside the
+ * page. The list is the kit's own (Base UI Autocomplete, portaled), carrying the popover tokens.
+ */
+/**
+ * A BYTE contract as much as a behavioral one (forge task 3614): the suggesting field is Base UI's
+ * Autocomplete, ~38 kB gzip, and 5.92.0 rooted every TagsInput in it — station's FolderSizesView,
+ * whose rules fields suggest nothing, went 7.15 → 44.32 kB gzip. A field without `suggestions`
+ * must not carry that engine; one with them fetches it, and loses nothing typed meanwhile.
+ *
+ * 🔴 These run BEFORE the `suggestions` block preloads the engine, so the first render here is
+ * the plain field the hand-over starts from.
+ */
+describe('the suggesting field is loaded only when asked for', () => {
+  test('TagsInput.tsx imports no Base UI, and reaches the suggesting field dynamically', () => {
+    const src = readFileSync(join(import.meta.dir, 'TagsInput.tsx'), 'utf8');
+    expect(src).not.toMatch(/from\s*['"]@base-ui\//);
+    expect(src).not.toMatch(/from\s*['"]\.\/(TagsInputSuggesting|suggestionList)(\.js)?['"]/);
+    expect(src).toContain("import('./TagsInputSuggesting.js')");
+  });
+
+  test('a draft typed and the focus held before the engine arrives are still there after', async () => {
+    const { container } = render(
+      <TagsInput value={[]} onChange={() => undefined} suggestions={['banking', 'tax']} />,
+    );
+    const plain = container.querySelector('input') as HTMLInputElement;
+    expect(plain.getAttribute('role'), 'the engine was already loaded — this test must run first').toBeNull();
+    act(() => plain.focus());
+    fireEvent.change(plain, { target: { value: 'ba' } });
+    // Where the focus is in the commit that swaps the inputs, not some polls later: a mutation
+    // record is a microtask after that commit, before any passive effect (a later task), so a
+    // hand-over in `useEffect` reads <body> here every time, not only under a loaded gate.
+    let focusAtSwap: Element | null | undefined;
+    const swap = new MutationObserver(() => {
+      if (focusAtSwap === undefined && container.querySelector('input[role="combobox"]')) {
+        focusAtSwap = document.activeElement;
+      }
+    });
+    swap.observe(container, { childList: true, subtree: true, attributes: true });
+    await waitFor(() => expect(container.querySelector('input')?.getAttribute('role')).toBe('combobox'));
+    swap.disconnect();
+    const suggesting = container.querySelector('input') as HTMLInputElement;
+    expect(suggesting.value).toBe('ba');
+    expect(focusAtSwap).toBe(suggesting);
+    expect(document.activeElement).toBe(suggesting);
+  });
+});
+
 describe('suggestions', () => {
-  test('offers a datalist of suggestions, minus what is already committed', () => {
+  // Every case below draws the list, so the engine is in hand before the first render.
+  beforeAll(() => preloadSuggestingTagsInput());
+
+  const openList = (input: HTMLInputElement) =>
+    act(() => {
+      fireEvent.keyDown(input, { key: 'ArrowDown' });
+    });
+  const offeredNow = () => [...document.querySelectorAll('[role="option"]')].map((o) => o.textContent);
+
+  test('drawn in the page with the kit tokens, never a datalist — minus what is already committed', () => {
     const { container } = render(
       <TagsInput value={['work']} onChange={() => undefined} suggestions={['work', 'bank']} />,
     );
     const input = container.querySelector('input') as HTMLInputElement;
-    const list = container.querySelector('datalist') as HTMLDataListElement;
-    expect(list).not.toBeNull();
-    expect(input.getAttribute('list')).toBe(list.id);
-    const offered = [...list.querySelectorAll('option')].map((o) => o.getAttribute('value'));
-    expect(offered).toEqual(['bank']);
+    expect(document.querySelector('datalist')).toBeNull();
+    expect(input.getAttribute('list')).toBeNull();
+    openList(input);
+    expect(offeredNow()).toEqual(['bank']);
+    const popup = document.querySelector('[role="option"]')?.closest('.bg-popover');
+    expect(popup, 'the list does not carry the popover tokens').not.toBeNull();
   });
 
   test('🔴 suppression is case-insensitive — "Bank" committed hides the suggestion "bank"', () => {
@@ -100,16 +161,70 @@ describe('suggestions', () => {
     const { container } = render(
       <TagsInput value={['Bank']} onChange={() => undefined} suggestions={['bank', 'tax']} />,
     );
-    const offered = [...container.querySelectorAll('datalist option')].map((o) =>
-      o.getAttribute('value'),
+    openList(container.querySelector('input') as HTMLInputElement);
+    expect(offeredNow()).toEqual(['tax']);
+  });
+
+  test('narrows to what is typed, in any case', () => {
+    const { container } = render(
+      <TagsInput value={[]} onChange={() => undefined} suggestions={['Banking', 'tax', 'bank']} />,
     );
-    expect(offered).toEqual(['tax']);
+    const input = container.querySelector('input') as HTMLInputElement;
+    fireEvent.change(input, { target: { value: 'BAN' } });
+    openList(input);
+    expect(offeredNow()).toEqual(['Banking', 'bank']);
+  });
+
+  test('picking a suggestion commits it as a tag — not the half-typed draft', () => {
+    function WithSuggestions() {
+      const [value, setValue] = useState<string[]>([]);
+      return (
+        <div>
+          <TagsInput value={value} onChange={setValue} suggestions={['banking', 'tax']} />
+          <output data-json>{JSON.stringify(value)}</output>
+        </div>
+      );
+    }
+    const { container } = render(<WithSuggestions />);
+    const input = container.querySelector('input') as HTMLInputElement;
+    fireEvent.change(input, { target: { value: 'ba' } });
+    openList(input);
+    act(() => {
+      fireEvent.click(document.querySelector('[role="option"]') as HTMLElement);
+    });
+    expect(json(container)).toEqual(['banking']);
+    expect(input.value).toBe('');
+  });
+
+  test('Enter on a highlighted suggestion commits the suggestion', () => {
+    function WithSuggestions() {
+      const [value, setValue] = useState<string[]>([]);
+      return (
+        <div>
+          <TagsInput value={value} onChange={setValue} suggestions={['banking', 'tax']} />
+          <output data-json>{JSON.stringify(value)}</output>
+        </div>
+      );
+    }
+    const { container } = render(<WithSuggestions />);
+    const input = container.querySelector('input') as HTMLInputElement;
+    fireEvent.change(input, { target: { value: 'ba' } });
+    openList(input);
+    act(() => {
+      fireEvent.keyDown(input, { key: 'ArrowDown' });
+    });
+    act(() => {
+      fireEvent.keyDown(input, { key: 'Enter' });
+    });
+    expect(json(container)).toEqual(['banking']);
   });
 
-  test('no suggestions → no datalist and no dangling list attribute', () => {
+  test('no suggestions → no list and no dangling list attribute', () => {
     const { container } = render(<TagsInput value={[]} onChange={() => undefined} />);
-    expect(container.querySelector('datalist')).toBeNull();
+    expect(document.querySelector('datalist')).toBeNull();
     const input = container.querySelector('input') as HTMLInputElement;
     expect(input.getAttribute('list')).toBeNull();
+    openList(input);
+    expect(offeredNow()).toEqual([]);
   });
 });