raystack / raystack/apsara

[Search] Add keyboard shortcuts and improve clear button UX

Open
#632 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

component triage
Dominant language
TypeScript
Stars
70
Forks
13
Avg merge
2d 5h
Merged PRs (30d)
8

Description

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:

  • Replace hardcoded CSS values with design tokens (#672)
  • Remove !important declarations (#678)

Files

  • packages/raystack/raystack/components/search/

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in packages/raystack/raystack/components/search/ and read the Search component together with its InputField integration. Check the existing component behavior before addressing Escape-to-clear, clear-button focus, event forwarding, and the default search type. Done means these listed interactions work consistently and the moved CSS-token and !important items remain out of scope.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.