@dashforge/tw 0.8.1-beta → 0.9.0-beta

package/src/components/DataGrid/DataGrid.tsx

@@ -1,5 +1,7 @@
 import {
   useMemo,
+  useState,
+  useEffect,
   type ReactNode,
   type MouseEvent,
   type PointerEvent as RPointerEvent,
@@ -43,6 +45,7 @@ import {
 const DEFAULT_LABELS: Required<TableLabels> = {
   searchPlaceholder: 'Search...',
   noData: 'No data',
+  noResults: 'No matching results',
   loading: 'Loading…',
   ariaSortNone: 'Not sorted. Click to sort ascending.',
   ariaSortAscending: 'Sorted ascending. Click to sort descending.',
@@ -69,8 +72,7 @@ const DEFAULT_LABELS: Required<TableLabels> = {
   densitySpacious: 'Spacious',
   columnsButton: 'Columns',
   columnsTitle: 'Toggle columns',
-  columnsShowAll: 'Show all',
-  columnsHideAll: 'Hide all',
+  columnsToggleAll: 'Toggle all columns',
 };
 
 /**
@@ -235,7 +237,7 @@ export function DataGrid<T extends object>(props: DataGridProps<T>) {
     defaultValue: defaultColumnWidths,
     onChange: onColumnWidthsChange,
   });
-  const { startResize } = useColumnResize({
+  const { startResize, nudge: nudgeColumnWidth } = useColumnResize({
     widths: columnWidths,
     onChange: setColumnWidths,
   });
@@ -255,6 +257,23 @@ export function DataGrid<T extends object>(props: DataGridProps<T>) {
     onChange: setColumnOrder,
   });
 
+  // Column reorder rides on native HTML5 drag-and-drop, whose
+  // `dragstart` / `drop` events DO NOT fire for touch input. On a
+  // coarse-pointer device the drag would be a dead affordance — so
+  // we detect the primary pointer and gate reorder off there. Mouse
+  // / trackpad / pen (fine pointer) keep the feature. A pointer-event
+  // based reorder that also covers touch is tracked as a follow-up
+  // in REFINEMENT-NOTES.md.
+  const [coarsePointer, setCoarsePointer] = useState(false);
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return;
+    const mq = window.matchMedia('(pointer: coarse)');
+    setCoarsePointer(mq.matches);
+    const onChange = (e: MediaQueryListEvent) => setCoarsePointer(e.matches);
+    mq.addEventListener('change', onChange);
+    return () => mq.removeEventListener('change', onChange);
+  }, []);
+
   // Apply the active order to the columns list. Cols not in the
   // order array (e.g. newly-added columns at runtime) are appended
   // in their original position from `cols`.
@@ -420,8 +439,7 @@ export function DataGrid<T extends object>(props: DataGridProps<T>) {
               labels={{
                 columnsButton: labels.columnsButton,
                 columnsTitle: labels.columnsTitle,
-                columnsShowAll: labels.columnsShowAll,
-                columnsHideAll: labels.columnsHideAll,
+                columnsToggleAll: labels.columnsToggleAll,
               }}
             />
           )}
@@ -434,7 +452,19 @@ export function DataGrid<T extends object>(props: DataGridProps<T>) {
         className={cn(v.scroll(), slotProps?.scroll?.className)}
         style={height ? { height, maxHeight: height } : undefined}
       >
-        <table className={cn(v.table(), slotProps?.table?.className)}>
+        {/*
+          `aria-rowcount` announces the TRUE total to assistive tech —
+          the virtualized DOM only holds the ~visible window, so without
+          it a screen reader reports "row N of <window size>" instead of
+          "row N of <dataset size>". `+ 1` accounts for the header row.
+          Each `<tr>` carries a 1-based `aria-rowindex` (header = 1,
+          data rows = absoluteIndex + 2). `-1` when the effective count
+          is unknown/zero keeps it a valid (ignored) value.
+        */}
+        <table
+          className={cn(v.table(), slotProps?.table?.className)}
+          aria-rowcount={effectiveTotalCount > 0 ? effectiveTotalCount + 1 : -1}
+        >
           {caption != null && (
             <caption className={cn(!showCaption && 'sr-only', 'py-2 text-sm text-neutral-500')}>
               {caption}
@@ -447,7 +477,10 @@ export function DataGrid<T extends object>(props: DataGridProps<T>) {
               slotProps?.thead?.className,
             )}
           >
-            <tr className={cn(v.headerRow(), slotProps?.headerRow?.className)}>
+            <tr
+              aria-rowindex={1}
+              className={cn(v.headerRow(), slotProps?.headerRow?.className)}
+            >
               {showSelectionColumn && (
                 <th
                   scope="col"
@@ -492,8 +525,11 @@ export function DataGrid<T extends object>(props: DataGridProps<T>) {
                     enableColumnResize && col.resizable !== false
                   }
                   startResize={startResize}
+                  nudgeColumnWidth={nudgeColumnWidth}
                   reorderable={
-                    enableColumnReorder && col.reorderable !== false
+                    enableColumnReorder &&
+                    col.reorderable !== false &&
+                    !coarsePointer
                   }
                   reorderHandlers={reorderHandlers}
                   labels={labels}
@@ -537,7 +573,16 @@ export function DataGrid<T extends object>(props: DataGridProps<T>) {
                 ? renderEmptyState({
                     totalColumnCount,
                     emptyState,
-                    fallback: labels.noData,
+                    // Distinguish a genuinely empty dataset from one
+                    // emptied by an active search / filter (works for
+                    // server-side mode too — a query that returns 0
+                    // rows still reads as "no matching results").
+                    fallback:
+                      rows.length > 0 &&
+                      (debouncedSearchQuery.trim().length > 0 ||
+                        filterModel.length > 0)
+                        ? labels.noResults
+                        : labels.noData,
                     cellClass: cn(
                       v.cell(),
                       v.emptyState(),
@@ -648,6 +693,13 @@ function HeaderCell<T extends object>(props: {
     clampMin: number,
     clampMax: number,
   ) => (e: RPointerEvent<HTMLElement>) => void;
+  nudgeColumnWidth: (
+    field: string,
+    currentWidth: number,
+    delta: number,
+    clampMin: number,
+    clampMax: number,
+  ) => void;
   reorderable: boolean;
   reorderHandlers: ColumnReorderHandlers;
   labels: Required<TableLabels>;
@@ -665,6 +717,7 @@ function HeaderCell<T extends object>(props: {
     effectiveWidth,
     resizable,
     startResize,
+    nudgeColumnWidth,
     reorderable,
     reorderHandlers,
     labels,
@@ -720,24 +773,55 @@ function HeaderCell<T extends object>(props: {
       }
     : {};
 
+  // Resize bounds — shared by the pointer-drag and keyboard paths.
+  const resizeMin = col.minWidth ?? 40;
+  const resizeMax = col.maxWidth ?? 1200;
+  // Keyboard nudge step: 16px, or 64px with Shift held (coarse).
+  const measureWidth = (handle: HTMLElement): number =>
+    effectiveWidth ??
+    (handle.parentElement as HTMLElement | null)?.getBoundingClientRect()
+      .width ??
+    120;
+
   const resizeHandle = resizable ? (
     <span
       role="separator"
       aria-orientation="vertical"
       aria-label={`Resize ${typeof col.header === 'string' ? col.header : col.field}`}
+      // Width bounds announced to assistive tech on the separator.
+      aria-valuemin={resizeMin}
+      aria-valuemax={resizeMax}
+      aria-valuenow={effectiveWidth ?? undefined}
+      // Keyboard-operable: focusable + ArrowLeft/Right resize. WCAG 2.1
+      // keyboard operability — the drag is no longer the only path.
+      tabIndex={disabled ? -1 : 0}
+      // D6 guard: the parent `<th>` is `draggable` when reorderable;
+      // marking the handle non-draggable means grabbing the handle
+      // starts a RESIZE, never a column-reorder drag.
+      draggable={false}
       onPointerDown={(e) => {
-        const handle = e.currentTarget;
-        const th = handle.parentElement as HTMLElement | null;
-        const startWidth =
-          effectiveWidth ?? th?.getBoundingClientRect().width ?? 120;
-        const min = col.minWidth ?? 40;
-        const max = col.maxWidth ?? 1200;
-        startResize(col.field as string, startWidth, min, max)(e);
+        const startWidth = measureWidth(e.currentTarget);
+        startResize(col.field as string, startWidth, resizeMin, resizeMax)(e);
+      }}
+      onKeyDown={(e) => {
+        if (disabled) return;
+        if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
+        e.preventDefault();
+        const step = (e.shiftKey ? 64 : 16) * (e.key === 'ArrowLeft' ? -1 : 1);
+        const current = measureWidth(e.currentTarget);
+        nudgeColumnWidth(
+          col.field as string,
+          current,
+          step,
+          resizeMin,
+          resizeMax,
+        );
       }}
       className={cn(
         'absolute top-0 bottom-0 right-0 w-1.5',
         'cursor-col-resize select-none touch-none',
         'hover:bg-primary-300 active:bg-primary-400',
+        'focus:outline-none focus-visible:bg-primary-400',
         'transition-colors motion-reduce:transition-none',
       )}
     />
@@ -952,6 +1036,10 @@ function renderVirtualizedBody<T extends object>(args: {
         return (
           <tr
             key={rowId}
+            // 1-based row index in the FULL dataset (header row is 1,
+            // so data rows start at 2). Lets a screen reader announce
+            // the true position despite virtualization windowing.
+            aria-rowindex={absoluteIdx + 2}
             data-selected={isSelected ? 'true' : 'false'}
             aria-selected={rowSelection !== 'none' ? isSelected : undefined}
             className={classes.row}

package/src/components/DataGrid/filters/ColumnFilters.test.tsx

@@ -0,0 +1,330 @@
+// @vitest-environment jsdom
+/**
+ * Unit tests for the per-column filter UI (`ColumnFilterTrigger`).
+ *
+ * Sprint 6 P4 — the filter UI shipped in 0.8.0-beta with only
+ * DataGrid-integration coverage. This file exercises each filter
+ * type (text / number / boolean / date) directly, including the
+ * apply / clear branches + edge cases.
+ */
+import * as React from 'react';
+import { describe, it, expect, afterEach, beforeAll, vi } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import { ColumnFilterTrigger } from './ColumnFilters.js';
+import type { TableFilterModel } from '../../Table/table.types.js';
+
+void React;
+afterEach(() => cleanup());
+
+beforeAll(() => {
+  if (typeof globalThis.ResizeObserver === 'undefined') {
+    (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver =
+      class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      };
+  }
+});
+
+const EMPTY: TableFilterModel = [];
+
+describe('ColumnFilterTrigger — trigger button', () => {
+  it('renders a filter button', () => {
+    render(
+      <ColumnFilterTrigger
+        field="name"
+        filterType="text"
+        filterModel={EMPTY}
+        onFilterChange={() => {}}
+      />,
+    );
+    expect(screen.getByRole('button', { name: 'Filter' })).not.toBeNull();
+  });
+
+  it('shows aria-pressed=false when no filter is active', () => {
+    render(
+      <ColumnFilterTrigger
+        field="name"
+        filterType="text"
+        filterModel={EMPTY}
+        onFilterChange={() => {}}
+      />,
+    );
+    expect(
+      screen.getByRole('button', { name: 'Filter' }).getAttribute('aria-pressed'),
+    ).toBe('false');
+  });
+
+  it('shows aria-pressed=true when a filter is active on the field', () => {
+    render(
+      <ColumnFilterTrigger
+        field="name"
+        filterType="text"
+        filterModel={[{ field: 'name', op: 'contains', value: 'x' }]}
+        onFilterChange={() => {}}
+      />,
+    );
+    expect(
+      screen.getByRole('button', { name: 'Filter' }).getAttribute('aria-pressed'),
+    ).toBe('true');
+  });
+
+  it('translates the trigger label via labels', () => {
+    render(
+      <ColumnFilterTrigger
+        field="name"
+        filterType="text"
+        filterModel={EMPTY}
+        onFilterChange={() => {}}
+        labels={{ filterColumn: 'Filtra' }}
+      />,
+    );
+    expect(screen.getByRole('button', { name: 'Filtra' })).not.toBeNull();
+  });
+
+  it('is disabled when disabled is set', () => {
+    render(
+      <ColumnFilterTrigger
+        field="name"
+        filterType="text"
+        filterModel={EMPTY}
+        onFilterChange={() => {}}
+        disabled
+      />,
+    );
+    expect(
+      (screen.getByRole('button', { name: 'Filter' }) as HTMLButtonElement)
+        .disabled,
+    ).toBe(true);
+  });
+});
+
+describe('ColumnFilterTrigger — text filter', () => {
+  it('Apply commits a contains filter', () => {
+    const onFilterChange = vi.fn();
+    render(
+      <ColumnFilterTrigger
+        field="name"
+        filterType="text"
+        filterModel={EMPTY}
+        onFilterChange={onFilterChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Filter' }));
+    fireEvent.change(screen.getByPlaceholderText('…'), {
+      target: { value: 'abc' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(onFilterChange).toHaveBeenCalledWith([
+      { field: 'name', op: 'contains', value: 'abc' },
+    ]);
+  });
+
+  it('Apply with an empty value commits a removal (null → no filter)', () => {
+    const onFilterChange = vi.fn();
+    render(
+      <ColumnFilterTrigger
+        field="name"
+        filterType="text"
+        filterModel={[{ field: 'name', op: 'contains', value: 'old' }]}
+        onFilterChange={onFilterChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Filter' }));
+    fireEvent.change(screen.getByDisplayValue('old'), {
+      target: { value: '' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(onFilterChange).toHaveBeenCalledWith([]);
+  });
+
+  it('Clear removes the filter for the field', () => {
+    const onFilterChange = vi.fn();
+    render(
+      <ColumnFilterTrigger
+        field="name"
+        filterType="text"
+        filterModel={[{ field: 'name', op: 'contains', value: 'x' }]}
+        onFilterChange={onFilterChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Filter' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Clear' }));
+    expect(onFilterChange).toHaveBeenCalledWith([]);
+  });
+
+  it('Enter in the text input applies the filter', () => {
+    const onFilterChange = vi.fn();
+    render(
+      <ColumnFilterTrigger
+        field="name"
+        filterType="text"
+        filterModel={EMPTY}
+        onFilterChange={onFilterChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Filter' }));
+    const input = screen.getByPlaceholderText('…');
+    fireEvent.change(input, { target: { value: 'typed' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+    expect(onFilterChange).toHaveBeenCalledWith([
+      { field: 'name', op: 'contains', value: 'typed' },
+    ]);
+  });
+});
+
+describe('ColumnFilterTrigger — number range filter', () => {
+  it('Apply with min + max commits a between filter', () => {
+    const onFilterChange = vi.fn();
+    render(
+      <ColumnFilterTrigger
+        field="age"
+        filterType="number"
+        filterModel={EMPTY}
+        onFilterChange={onFilterChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Filter' }));
+    const inputs = screen.getAllByRole('spinbutton');
+    fireEvent.change(inputs[0]!, { target: { value: '10' } });
+    fireEvent.change(inputs[1]!, { target: { value: '50' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(onFilterChange).toHaveBeenCalledWith([
+      { field: 'age', op: 'between', value: [10, 50] },
+    ]);
+  });
+
+  it('Apply with only a min commits an open-ended range', () => {
+    const onFilterChange = vi.fn();
+    render(
+      <ColumnFilterTrigger
+        field="age"
+        filterType="number"
+        filterModel={EMPTY}
+        onFilterChange={onFilterChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Filter' }));
+    const inputs = screen.getAllByRole('spinbutton');
+    fireEvent.change(inputs[0]!, { target: { value: '18' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(onFilterChange).toHaveBeenCalledWith([
+      { field: 'age', op: 'between', value: [18, null] },
+    ]);
+  });
+
+  it('Apply with both ends empty removes the filter', () => {
+    const onFilterChange = vi.fn();
+    render(
+      <ColumnFilterTrigger
+        field="age"
+        filterType="number"
+        filterModel={[{ field: 'age', op: 'between', value: [1, 2] }]}
+        onFilterChange={onFilterChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Filter' }));
+    // The two inputs are seeded from the current value — clear them.
+    const inputs = screen.getAllByRole('spinbutton');
+    fireEvent.change(inputs[0]!, { target: { value: '' } });
+    fireEvent.change(inputs[1]!, { target: { value: '' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(onFilterChange).toHaveBeenCalledWith([]);
+  });
+});
+
+describe('ColumnFilterTrigger — boolean filter', () => {
+  it('Apply with True selected commits an equals=true filter', () => {
+    const onFilterChange = vi.fn();
+    render(
+      <ColumnFilterTrigger
+        field="active"
+        filterType="boolean"
+        filterModel={EMPTY}
+        onFilterChange={onFilterChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Filter' }));
+    fireEvent.click(screen.getByLabelText('True'));
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(onFilterChange).toHaveBeenCalledWith([
+      { field: 'active', op: 'equals', value: true },
+    ]);
+  });
+
+  it('Apply with False selected commits an equals=false filter', () => {
+    const onFilterChange = vi.fn();
+    render(
+      <ColumnFilterTrigger
+        field="active"
+        filterType="boolean"
+        filterModel={EMPTY}
+        onFilterChange={onFilterChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Filter' }));
+    fireEvent.click(screen.getByLabelText('False'));
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(onFilterChange).toHaveBeenCalledWith([
+      { field: 'active', op: 'equals', value: false },
+    ]);
+  });
+
+  it('Apply with All selected removes the filter', () => {
+    const onFilterChange = vi.fn();
+    render(
+      <ColumnFilterTrigger
+        field="active"
+        filterType="boolean"
+        filterModel={[{ field: 'active', op: 'equals', value: true }]}
+        onFilterChange={onFilterChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Filter' }));
+    fireEvent.click(screen.getByLabelText('All'));
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(onFilterChange).toHaveBeenCalledWith([]);
+  });
+});
+
+describe('ColumnFilterTrigger — date range filter', () => {
+  it('Apply with from + to commits a between filter (ISO strings)', () => {
+    const onFilterChange = vi.fn();
+    render(
+      <ColumnFilterTrigger
+        field="joined"
+        filterType="date"
+        filterModel={EMPTY}
+        onFilterChange={onFilterChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Filter' }));
+    const dateInputs = document.querySelectorAll('input[type="date"]');
+    fireEvent.change(dateInputs[0]!, { target: { value: '2024-01-01' } });
+    fireEvent.change(dateInputs[1]!, { target: { value: '2024-12-31' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(onFilterChange).toHaveBeenCalledWith([
+      { field: 'joined', op: 'between', value: ['2024-01-01', '2024-12-31'] },
+    ]);
+  });
+
+  it('Apply with both date ends empty removes the filter', () => {
+    const onFilterChange = vi.fn();
+    render(
+      <ColumnFilterTrigger
+        field="joined"
+        filterType="date"
+        filterModel={[
+          { field: 'joined', op: 'between', value: ['2024-01-01', null] },
+        ]}
+        onFilterChange={onFilterChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Filter' }));
+    const dateInputs = document.querySelectorAll('input[type="date"]');
+    fireEvent.change(dateInputs[0]!, { target: { value: '' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(onFilterChange).toHaveBeenCalledWith([]);
+  });
+});

package/src/components/DataGrid/filters/ColumnFilters.tsx

@@ -1,4 +1,4 @@
-import { useState, type ReactNode } from 'react';
+import { useState, type ReactNode, type KeyboardEvent } from 'react';
 import { Popover } from '../../Popover/Popover.js';
 import { cn } from '../../../utils/cn.js';
 import type {
@@ -40,6 +40,22 @@ function setFilter(
   return [...rest, next];
 }
 
+/**
+ * Shared `onKeyDown` for filter inputs — pressing Enter commits the
+ * filter (equivalent to clicking Apply). Without this the user has to
+ * leave the keyboard and click the button, which reads as broken for
+ * a single-field text filter.
+ */
+function onEnterApply(
+  e: KeyboardEvent<HTMLInputElement>,
+  apply: () => void,
+): void {
+  if (e.key === 'Enter') {
+    e.preventDefault();
+    apply();
+  }
+}
+
 // ───── Filter labels (i18n) ─────
 
 export interface ColumnFilterLabels {
@@ -173,18 +189,22 @@ function TextFilter(props: {
     typeof current?.value === 'string' ? current.value : '',
   );
 
+  const apply = () =>
+    onCommit(value.trim() ? { field, op: 'contains', value } : null);
+
   return (
     <div className="flex flex-col gap-2 min-w-[200px]">
       <input
         type="text"
         value={value}
         onChange={(e) => setValue(e.target.value)}
+        onKeyDown={(e) => onEnterApply(e, apply)}
         placeholder="…"
         autoFocus
         className="rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
       />
       <FilterActions
-        onApply={() => onCommit(value.trim() ? { field, op: 'contains', value } : null)}
+        onApply={apply}
         onClear={() => {
           setValue('');
           onCommit(null);
@@ -236,6 +256,7 @@ function NumberRangeFilter(props: {
             type="number"
             value={min}
             onChange={(e) => setMin(e.target.value)}
+            onKeyDown={(e) => onEnterApply(e, apply)}
             autoFocus
             className="rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
           />
@@ -246,6 +267,7 @@ function NumberRangeFilter(props: {
             type="number"
             value={max}
             onChange={(e) => setMax(e.target.value)}
+            onKeyDown={(e) => onEnterApply(e, apply)}
             className="rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
           />
         </label>
@@ -357,6 +379,7 @@ function DateRangeFilter(props: {
             type="date"
             value={from}
             onChange={(e) => setFrom(e.target.value)}
+            onKeyDown={(e) => onEnterApply(e, apply)}
             autoFocus
             className="rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
           />
@@ -367,6 +390,7 @@ function DateRangeFilter(props: {
             type="date"
             value={to}
             onChange={(e) => setTo(e.target.value)}
+            onKeyDown={(e) => onEnterApply(e, apply)}
             className="rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1.5 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
           />
         </label>