Skip to content

Add Mantine clear buttons to all text inputs application-wide #1333

@cliffhall

Description

@cliffhall

Background

The web client uses Mantine TextInput, Autocomplete, and the
shared search/filter inputs across many surfaces (prompt arguments,
resource-template variables, sidebar search fields, the message-history
search, the sampling-request panel, etc.). None of them surface a
clear (×) affordance today — to reset a field the user has to
select-all + delete, which is fine for a token-length argument but
miserable for a multi-line draft or a search query they want to retype.

Mantine ships clear-button support on its input primitives via the
clearable + clearButtonProps props, with the visual placement
documented under "Left and right sections":
https://mantine.dev/core/input/#left-and-right-sections

Scope

Apply clearable to every user-editable text input across the app so
each one renders a Mantine clear × in the right section when it has
a value. Concretely:

  • Prompt argument inputsclients/web/src/components/groups/PromptArgumentsForm/PromptArgumentsForm.tsx (both the Autocomplete and the TextInput branch)
  • Resource-template variable inputsclients/web/src/components/groups/ResourceTemplatePanel/ResourceTemplatePanel.tsx (both branches)
  • Search inputs — anywhere TextInput is used with a placeholder like \"Search...\" (sidebar controls for resources / prompts / tools / tasks / history / apps; the History screen filter; the MessagesPanel filter; etc. — grep for placeholder=\"Search)
  • Sampling response textareaSamplingRequestPanel model-used input and the response Textarea
  • Model-used input — same panel, the small TextInput
  • Any other user-facing TextInput / Textarea / Autocomplete found by grep -rn TextInput src and grep -rn Autocomplete src. Skip read-only/display-only inputs (e.g. the URI preview, which is Text not an input).

The minimal change per input is adding clearable (plus onClear where the host needs to know — e.g. to also clear the value of a controlled-component prop, or to clear other state like cached completions).

Implementation notes

  • Most inputs in the project are controlled (value + onChange). Mantine's clear button calls onChange("") internally, so a default clearable is enough — no onClear plumbing needed for plain text fields.
  • For inputs that own additional derived state (e.g. PromptArgumentsForm caching completions per argument, ResourceTemplatePanel doing the same), pass onClear={() => /* drop cached completions for this arg */} so the stale dropdown is reset along with the value.
  • For app-wide defaults, prefer a Mantine theme override in clients/web/src/theme/TextInput.ts (and add similar files / variants for Autocomplete and Textarea if needed) that sets clearable: true by default. Per-site overrides (clearable={false}) can opt out for inputs where a clear button doesn't make sense.
  • For autocomplete / template variable inputs, clearing the value should also collapse any open dropdown — Mantine handles this automatically via onChange(\"\"), no extra work expected.

Acceptance criteria

  • Every user-editable TextInput / Autocomplete / Textarea across the app shows the Mantine clear × when populated.
  • Clicking the clear button empties the field. For prompt / resource-template arguments, the stale completion dropdown for that argument is also cleared.
  • Read-only / display-only text surfaces (URI previews, message bubbles, etc.) are untouched.
  • npm run validate, npm run test:integration, and npm run test:storybook all pass; new / updated unit tests cover the clear behavior on a representative input from each category (sidebar search, prompt argument, resource-template variable, sampling response).

Metadata

Metadata

Assignees

No one assigned

    Labels

    v2Issues and PRs for v2

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions