[hrithik577]

Description

Added interactive clear (ClearIcon) end adornments to both PluginSearchBar and RecipeSearchBar text inputs when search text is non-empty. Added aria-label="Clear search input" for screen-reader accessibility.

Changes

• src/components/pluginList/PluginSearchBar.tsx: Added clear button endAdornment.
• src/components/recipeList/RecipeSearchBar.tsx: Added clear button endAdornment.
• tests/components/pluginList/PluginSearchBar.test.tsx: Added unit test suite for PluginSearchBar.
• tests/components/recipeList/RecipeSearchBar.test.tsx: Added search clear test case.

Verification

• Unit tests (npm test): Passed (33 test files, 311 tests passed).
• Linter (npm run lint): Passed.
• Formatting (npm run format:check): Passed.
• Build (npm run build): Passed.

[hrithik577]

Hi maintainers, I’ve completed the changes for #119 and verified the PR with the full test suite, linting, formatting, and build checks.

All checks are passing (311 tests across 33 test files). When you have a chance, could someone please review the PR?

Thank you!

[PratikMane0112]

hey @hrithik577, can you plz provide ss of before & after changes. Currently PR preview is not implemented yet, so its difficult to see the ui changes. i am working on it in issue 87.

suggestion for future, plz better to create a issue first to have a context about the upcoming changes :)

[hrithik577]

@PratikMane0112 ya i will look after it

[hrithik577]

Hi @PratikMane0112, here are the Before & After screenshots for the search bar clear button changes:

1. Plugin Search Bar (/plugins)

Before (Empty State - No Clear Button):

After (Text Entered - Clear ✕ Button Visible):

2. Recipe Search Bar (/recipes)

After (Text Entered - Clear ✕ Button Visible):

Thank you for the advice on creating an issue first! I will make sure to open an issue prior to creating PRs for future contributions.

[Copilot]

🟡 Changes recommended

The new clear-button adornments should prevent default mouse-down behavior to avoid unintentionally blurring the search field (notably impacting mobile/keyboard UX).

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Adds a “clear search” affordance to the plugin and recipe search inputs, improving UX and accessibility, and expands automated coverage around the search-bar behaviors.

Changes:

• Add ClearIcon end-adornments to PluginSearchBar and RecipeSearchBar when the search text is non-empty (with aria-label="Clear search input").
• Add a new unit test suite for PluginSearchBar and add a clear-button test case for RecipeSearchBar.
• Increase timeout for a slow PluginList integration test that renders from real report.json data.

File summaries

File	Description
src/components/pluginList/PluginSearchBar.tsx	Adds a clear-button end adornment to reset the search input.
src/components/recipeList/RecipeSearchBar.tsx	Adds a clear-button end adornment to reset the search input.
tests/components/pluginList/PluginSearchBar.test.tsx	New unit tests covering placeholder, counts, filter chip behavior, and clear button behavior.
tests/components/recipeList/RecipeSearchBar.test.tsx	Adds a unit test for the new clear button behavior.
tests/pages/PluginList.integration.test.tsx	Adds a longer per-test timeout for real-data rendering stability.

Review details

• Files reviewed: 5/5 changed files
• Comments generated: 2
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[hrithik577]

I have updated both PluginSearchBar and RecipeSearchBar to add onMouseDown={(e) => e.preventDefault()} on the clear IconButton. This prevents input blur and keeps focus in the search field when clearing text.

Thank you for the review suggestion!

[Copilot]

🔵 Needs a closer look

Keyboard activation can lose focus in both clear buttons, and empty-search regression assertions are needed.

Review details

Suppressed comments (6)

src/components/pluginList/PluginSearchBar.tsx:45

• When this control is activated with Enter or Space, onClick clears search and this conditional unmounts the currently focused button. The onMouseDown guard only covers pointer activation, so keyboard users can lose focus from the search field; move focus back to the input after clearing (and cover that keyboard path) so they can continue typing.

            endAdornment: search ? (
              <InputAdornment position="end">
                <IconButton
                  size="small"
                  onClick={() => onSearchChange('')}

src/components/pluginList/PluginSearchBar.tsx:41

• The new search ? ... : null branch is only tested for the truthy case. Add a regression assertion with search="" that Clear search input is absent; otherwise a future change could leave a clear button visible for empty searches without failing this suite.

            endAdornment: search ? (

src/components/recipeList/RecipeSearchBar.tsx:41

• When this control is activated with Enter or Space, onClick clears search and this conditional unmounts the currently focused button. The onMouseDown guard only covers pointer activation, so keyboard users can lose focus from the search field; move focus back to the input after clearing (and cover that keyboard path) so they can continue typing.

            endAdornment: search ? (
              <InputAdornment position="end">
                <IconButton
                  size="small"
                  onClick={() => onSearchChange('')}

src/components/recipeList/RecipeSearchBar.tsx:37

• The new search ? ... : null branch is only tested for the truthy case. Add a regression assertion with search="" that Clear search input is absent; otherwise a future change could leave a clear button visible for empty searches without failing this suite.

            endAdornment: search ? (

tests/components/pluginList/PluginSearchBar.test.tsx:96

• This test covers only the truthy search branch. The existing empty-search cases do not assert that the clear button is absent, so an always-rendered clear adornment could regress without failing the suite; add a queryByRole('button', { name: 'Clear search input' }) null assertion for an empty search.

  it('renders search clear button when search is non-empty and triggers onSearchChange("") when clicked', () => {
    const onSearchChange = vi.fn();
    render(
      <PluginSearchBar
        search="git"

tests/components/recipeList/RecipeSearchBar.test.tsx:86

• This test covers only the truthy search branch. The existing empty-search cases do not assert that the clear button is absent, so an always-rendered clear adornment could regress without failing the suite; add a queryByRole('button', { name: 'Clear search input' }) null assertion for an empty search.

  it('renders search clear button when search is non-empty and triggers onSearchChange("") when clicked', () => {
    const onSearchChange = vi.fn();
    render(
      <RecipeSearchBar
        search="Setup"

• Files reviewed: 5/5 changed files
• Comments generated: 0 new
• Review effort level: Lite

[PratikMane0112]

One comment otherwise LGTM

[hrithik577]

Hi @PratikMane0112 and @jonesbusy,

Sorry for the delay, and thank you for your patience!

I've updated the PR in commit 394bd4a to address the outstanding feedback:

• Consolidated Material UI and icon imports into named imports from their respective packages.
• Added input-focus restoration when clearing the search field using keyboard activation.
• Added regression tests for the clear button's empty state, focus behavior, and restoration of unfiltered results.

The full test suite (325 tests), lint, formatting, and TypeScript/Vite build checks passed locally.

Could a maintainer please approve the pending workflow so CI can run? I'm happy to address any further feedback.

Thank you!

[krisstern]

@PratikMane0112 would you like to give this another review?

[Copilot]

🟢 Approval recommended

Only minor test-labeling nits were noted; no blocking issues remain.

No open issues 🎉

_{Review effort: Lite}

[PratikMane0112]

LGTM, @hrithik577 thanks :)