Summary
Search is a custom component wrapping InputField with search-specific functionality. Has CSS specificity issues, hardcoded values, and missing UX patterns.
Improvements
3. Add Escape key to clear input
Common search UX pattern — pressing Escape should clear the input and optionally blur it.
4. Improve clear button focus management
After clearing, focus stays on the clear button instead of returning to the input field.
6. Pass event object to onClear callback
onClear() fires without the event object, inconsistent with other event handlers.
7. Default type="search" on input
For semantic HTML, the underlying input should default to type="search".
Moved to Cross-Cutting Issues
The following items have been moved to cross-cutting issues that address them across all components:
Files
packages/raystack/raystack/components/search/
Summary
Search is a custom component wrapping InputField with search-specific functionality. Has CSS specificity issues, hardcoded values, and missing UX patterns.
Improvements
3. Add Escape key to clear input
Common search UX pattern — pressing Escape should clear the input and optionally blur it.
4. Improve clear button focus management
After clearing, focus stays on the clear button instead of returning to the input field.
6. Pass event object to
onClearcallbackonClear()fires without the event object, inconsistent with other event handlers.7. Default
type="search"on inputFor semantic HTML, the underlying input should default to
type="search".Moved to Cross-Cutting Issues
The following items have been moved to cross-cutting issues that address them across all components:
Files
packages/raystack/raystack/components/search/