The Clear Button Lies

Lists / Tables

After you search, Clear updates the status line but the search box still shows the old text. Fix the mismatch.

After you fix it

Clear should empty the visible text in the search field.
The status line and the field should always agree (filter on vs off).
Typing should still update the active filter text as before.

import { useState, useEffect } from "react";

export default function App() {
  const [query, setQuery] = useState("");

  useEffect(() => {
    const b = document.body;
    const prevBg = b.style.background;
    const prevMargin = b.style.margin;
    b.style.background = "#fafafa";
    b.style.margin = "0";
    return () => {
      b.style.background = prevBg;
      b.style.margin = prevMargin;
    };
  }, []);

  return (
    <div style={styles.page}>
      <div style={styles.card}>
        <h1 style={styles.h1}>Support queue</h1>
        <p style={styles.sub}>Find a ticket before assigning it.</p>
        <div style={styles.row}>
          <input
            data-testid="search-input"
            type="search"
            placeholder="Search by subject or ID"
            defaultValue={query}
            onChange={(e) => setQuery(e.target.value)}
            style={styles.input}
          />
          <button
            type="button"
            data-testid="clear-btn"
            disabled={!query}
            onClick={() => setQuery("")}
            style={styles.clear}
          >
            Clear
          </button>
        </div>
        <p data-testid="filter-status" style={styles.hint}>
          {query ? `Active filter: ${query}` : "No active filter"}
        </p>
      </div>
    </div>
  );
}

const styles = {
  page: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    padding: "48px 24px",
    fontFamily: "'Segoe UI', system-ui, sans-serif",
  },
  card: {
    background: "#fff",
    borderRadius: 16,
    padding: "32px 36px",
    boxShadow: "0 1px 3px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.04)",
    minWidth: 360,
    maxWidth: 480,
  },
  h1: { margin: "0 0 8px", fontSize: 22, fontWeight: 700, color: "#1a1a2e" },
  sub: { margin: "0 0 20px", fontSize: 14, color: "#666" },
  row: { display: "flex", gap: 10, marginBottom: 16 },
  input: { flex: 1, padding: "10px 14px", fontSize: 15, borderRadius: 8, border: "1px solid #ddd", outline: "none" },
  clear: { padding: "10px 16px", fontSize: 14, fontWeight: 600, cursor: "pointer", background: "#4f46e5", color: "#fff", border: "none", borderRadius: 8 },
  hint: { margin: 0, fontSize: 13, color: "#555" },
};

Open Sandbox