discourse/plugins/chat/assets
Joffrey JAFFEUX fc437052bb
DEV: Add optional clear button to FilterInput component (#35569)
Introduces a new `@onClearInput` argument to the FilterInput component
that enables an optional clear button (X icon) to reset the input value.

API Changes:

FilterInput component now accepts:
- `@onClearInput` (optional) - Callback invoked when clear button is
clicked
- When both `@onClearInput` and `@value.length` are truthy, a clear
button appears on the right side of the input

Behavior:
- Clear button automatically shows/hides based on input value length
- Clicking clear button invokes the provided callback
- Input automatically receives focus after clearing

Usage:
```gjs
<FilterInput
  @value={{this.searchTerm}}
  @onClearInput={{this.handleClear}}
  @filterAction={{this.handleInput}}
/>
```

This new API is used on this commit for clearing the input of chat
search queries:

<img width="345" height="84" alt="Screenshot 2025-10-23 at 10 51 33"
src="https://github.com/user-attachments/assets/817912cb-acbc-4a15-877e-c130d8087863"
/>
<img width="672" height="57" alt="Screenshot 2025-10-23 at 10 51 27"
src="https://github.com/user-attachments/assets/6aa17f26-04fe-49c9-9fca-555e1cc7298c"
/>
2025-10-23 12:39:37 +02:00
..
javascripts DEV: Add optional clear button to FilterInput component (#35569) 2025-10-23 12:39:37 +02:00
stylesheets UI: slightly reduce padding above chat composer (#35546) 2025-10-23 09:49:18 +02:00