UI: Refocus search input after clearing it

[Sidnioulz]

What I did

Follow-up of #32590.

Ensures we refocus the search input after clearing search, for better UX.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

ø

Manual testing

1. Type "Frogs" in search
2. Kb nav to Clear button
3. Press Enter
4. Frogs are gone, but focus isn't.

Documentation

ø

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

• Bug Fixes
  • Improved search input clearing behavior to automatically focus on the search field after clearing, enabling users to resume searching immediately without additional clicks.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

The search component in the sidebar was modified to focus the search input field after the user clears the search input via the clear button, following the value reset and menu closure.

Changes

Cohort / File(s)	Summary
Search Input Clear Handler code/core/src/manager/components/sidebar/Search.tsx	Added focus() call to the search input field in the clear button handler to refocus the input after clearing the value and closing the menu

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6e66a2e and a4cf0a6.

📒 Files selected for processing (1)

• code/core/src/manager/components/sidebar/Search.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (4)

**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use camelCase for variable and function names

Files:

• code/core/src/manager/components/sidebar/Search.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{ts,tsx}: Enable TypeScript strict mode
Export functions from modules for testing purposes

Files:

• code/core/src/manager/components/sidebar/Search.tsx

**/*.{ts,tsx,js,jsx,json,html,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{ts,tsx,js,jsx,json,html,mjs}: Use ESLint and Prettier for code style enforcement
Run 'yarn prettier --write ' to format code after making changes
Run 'yarn lint:js:cmd ' to check for ESLint issues after making changes

Files:

• code/core/src/manager/components/sidebar/Search.tsx

code/**/!(*.test).{ts,tsx,js,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

code/**/!(*.test).{ts,tsx,js,mjs}: Use 'logger' from 'storybook/internal/node-logger' for server-side (Node.js) logging, not console.log/console.warn/console.error
Use 'logger' from 'storybook/internal/client-logger' for client-side (browser) logging, not console.log/console.warn/console.error
Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

• code/core/src/manager/components/sidebar/Search.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: normal
• GitHub Check: Core Unit Tests, windows-latest

🔇 Additional comments (1)

code/core/src/manager/components/sidebar/Search.tsx (1)

418-422: Verify the menu reopening behavior after clearing.

The focus restoration correctly improves keyboard navigation. However, focusing the input (line 421) will trigger the onFocus handler (lines 368-371), which calls openMenu(). This means the menu closes (line 420) and immediately reopens with last-viewed items.

Please confirm this is the intended UX—users clicking "Clear" might expect the search UI to dismiss entirely rather than reopen with last-viewed results.

Test the flow manually:

1. Type "Frogs" in search
2. Keyboard-navigate to Clear button (Tab or Shift+Tab)
3. Press Enter
4. Observe whether the menu reopening with last-viewed items feels natural or jarring

If the menu should remain closed after clearing, consider adding a flag to suppress openMenu() in the onFocus handler when triggered by programmatic focus from the clear action.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit a4cf0a6

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	46s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-11-25 16:08:36 UTC

[yannbf]

works pretty well!