Search Input

1import { SearchInput } from '@/ui/Input'23const [query, setQuery] = React.useState('')4const [results, setResults] = React.useState([])56// Debounce the REQUEST. The input value updates instantly, always.7const debounced = useDebounced(query, 300)89React.useEffect(() => {10  if (!debounced) return setResults(all)11  let cancelled = false12  search(debounced).then((r) => {13    // Without this guard, a slow response for "ap" overwrites the correct14    // results for "api-gateway" and nothing on screen explains why.15    if (!cancelled) setResults(r)16  })17  return () => { cancelled = true }18}, [debounced])1920<SearchInput21  value={query}22  placeholder="Search services…"          // names the SCOPE23  aria-label="Search services"            // a placeholder is not a name24  enterKeyHint="search"25  onChange={(e) => setQuery(e.target.value)}26  onClear={() => {27    setQuery('')28    setResults(all)                        // restore, do not just blank the box29    inputRef.current?.focus()30  }}31/>3233{/* The only feedback that the query did anything. */}34<p aria-live="polite" className="sr-only">35  {results.length} of {all.length} services match “{debounced}”36</p>

<div class="ds-search">
  <svg class="ds-search__icon" aria-hidden="true">…</svg>

  <input
    type="search"
    role="combobox"
    aria-label="Search services"
    aria-expanded="true"
    aria-controls="search-suggestions"
    aria-activedescendant="sug-2"
    placeholder="Search services…"
    enterkeyhint="search"
    autocomplete="off"
  />

  <!-- Only rendered when there is a query to clear. -->
  <button type="button" class="ds-search__clear" aria-label="Clear search">
    <svg aria-hidden="true">…</svg>
  </button>
</div>

<div id="search-suggestions" role="listbox" aria-label="Suggestions">
  <div id="sug-2" role="option" aria-selected="true">api-gateway</div>
</div>

<p class="sr-only" role="status" aria-live="polite">3 of 48 services match</p>

.ds-search { position: relative; }

.ds-search input {
  inline-size: 100%;
  block-size: 36px;
  padding-inline: 32px;              /* magnifier leading, clear trailing */
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--radius-md);
  background: var(--ds-surface-inset);
}

/* Leading, always. A trailing magnifier reads as a submit button. */
.ds-search__icon {
  position: absolute;
  inset-inline-start: 10px;
  inset-block-start: 50%;
  translate: 0 -50%;
  color: var(--ds-fg-muted);
  pointer-events: none;
}

/* The browser's own is inconsistent and unstyleable — draw our own. */
.ds-search input::-webkit-search-cancel-button { appearance: none; }

.ds-search__clear {
  position: absolute;
  inset-inline-end: 8px;
  inset-block-start: 50%;
  translate: 0 -50%;
  inline-size: 20px;
  block-size: 20px;
}

/* Matched to the field width, so the two read as one control. */
.ds-search__panel {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(100% + 6px);
  max-block-size: 18rem;
  overflow-y: auto;
  border-radius: var(--radius-lg);
  background: var(--ds-surface-overlay);
  box-shadow: var(--shadow-e4);
}

@media (pointer: coarse) {
  .ds-search input   { block-size: 44px; }
  .ds-search__clear  { inline-size: 44px; block-size: 44px; }
  /* The keyboard covers the lower half of the screen; a floating panel
     lands underneath it. */
  .ds-search__panel  { position: static; box-shadow: none; }
}