Skip to content

feat(web): add Mantine clear buttons to text inputs app-wide (#1333)#1448

Open
cliffhall wants to merge 1 commit into
v2/mainfrom
feat/1333-input-clear-buttons
Open

feat(web): add Mantine clear buttons to text inputs app-wide (#1333)#1448
cliffhall wants to merge 1 commit into
v2/mainfrom
feat/1333-input-clear-buttons

Conversation

@cliffhall

Copy link
Copy Markdown
Member

Summary

Closes #1333. Adds a clear (×) affordance to every user-editable text input across the web client so a populated field can be reset in a single click instead of select-all + delete.

Key finding

The issue proposed setting clearable: true as an app-wide theme default. In Mantine v8 (8.3.17) that only works for the combobox-based components (Autocomplete, Select, …) — plain TextInput and Textarea do not expose a public clearable prop (only the internal __clearable). So:

  • Autocompleteclearable enabled by default via theme/Autocomplete.ts (fires onChange(""), which also collapses the dropdown). Covers the prompt-argument and resource-template autocomplete branches.
  • TextInput / Textarea → clear button added per-site via rightSection + CloseButton (aria-label="Clear", rightSectionPointerEvents="auto"), rendered only when the field has a value and wired to reset the controlled value to "". This matches the "Left and right sections" pattern the issue's own Mantine link demonstrates.

A generic aria-label="Clear" is used (rather than field-specific labels) to match Mantine's own clear button and to avoid colliding with the many regex-based getByLabelText queries in the test suite.

Surfaces covered

Sidebar search (prompts, tools, apps, tasks, history, resources, network, logs), prompt-argument & resource-template variable inputs, sampling response/model fields, server config & settings forms, roots table, schema form, experimental features panel, and the server.json import panel.

Read-only/display Textareas (OutputValidationModal, UrlElicitationErrorModal) are intentionally left untouched.

Tests

Added clear-behavior unit tests on representative inputs from each category (sidebar search, prompt argument, resource-template variable, sampling response) plus the config/settings forms to keep per-file coverage ≥ 90%.

  • npm run validate
  • npm run test:integration
  • npm run test:storybook

🤖 Generated with Claude Code

Add a clear (×) affordance to every user-editable text input across the
web client so a populated field can be reset in one click.

- Autocomplete: enable `clearable` by default via the theme
  (`theme/Autocomplete.ts`) — covers the prompt-argument and
  resource-template variable autocomplete branches.
- TextInput / Textarea: Mantine v8 does not expose a public `clearable`
  prop on these primitives (only the combobox-based components do), so
  add the clear button manually via `rightSection` + `CloseButton`
  (aria-label="Clear") shown only when the field has a value, wired to
  reset the field's controlled value to "".

Applied to sidebar search inputs (prompts, tools, apps, tasks, history,
resources, network, logs), prompt-argument and resource-template
variable inputs, the sampling response/model fields, server config &
settings forms, roots table, schema form, experimental features panel,
and the server.json import panel. Read-only/display Textareas
(OutputValidationModal, UrlElicitationErrorModal) are intentionally left
untouched.

Tests cover the clear behavior on representative inputs from each
category (sidebar search, prompt argument, resource-template variable,
sampling response, plus the config/settings forms).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@cliffhall cliffhall added the v2 Issues and PRs for v2 label Jun 9, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

v2 Issues and PRs for v2

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant