Add clearSearchOnClose prop to Select component

[lcmohsen]

Add a clearSearchOnClose prop to the Select component.

Summary by CodeRabbit

• New Features
  • Select now supports an option to automatically clear the search input when the dropdown closes, reducing stale queries and improving repeat selections.
  • Backward compatible: the feature is disabled by default; enable it via a new component prop to opt in. No changes to current behavior unless explicitly activated.

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[github-actions]

📝 Storybook Preview: View Storybook

This preview will be updated automatically when you push new changes to this PR.

Note: The preview will be available after the workflow completes and the PR is approved for deployment.

[coderabbitai]

Walkthrough

Added a new optional prop clearSearchOnClose to Select, defaulting to false, and an effect that clears the internal searchQuery when the popover closes if this prop is true. No behavior changes occur unless the prop is enabled.

Changes

Cohort / File(s)	Summary of Changes
Select component packages/components/src/ui/select.tsx	Added public prop clearSearchOnClose?: boolean (default false); implemented effect to reset searchQuery to '' when popover closes and the prop is true; updated Select props and function signature accordingly.

Sequence Diagram(s)

sequenceDiagram
    actor User
    participant Select
    participant Popover

    User->>Select: Open dropdown
    Select->>Popover: Render/open
    Note over Select,Popover: User types to update searchQuery

    Popover-->>Select: onClose event
    alt clearSearchOnClose === true
        Select->>Select: set searchQuery("")
        Note right of Select: Search cleared on close
    else clearSearchOnClose === false
        Select->>Select: No change to searchQuery
    end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

I twitch my whiskers, click to close—no fear!
The search is swept, the burrow’s path is clear.
A tidy hop, a breezy, gentle doze,
With one small prop, the clover neatly goes.
🐇✨ Type, explore—then poof, the query’s rose!

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title succinctly and accurately describes the main change introduced by this pull request, namely adding the clearSearchOnClose prop to the Select component.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/add-clearSearchOnClose-prop-to-select

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between ad7fa7c and 016acc3.

📒 Files selected for processing (1)

• packages/components/src/ui/select.tsx (3 hunks)

🧰 Additional context used

📓 Path-based instructions (14)

packages/components/src/ui/**/*.tsx

📄 CodeRabbit inference engine (.cursor/rules/form-component-patterns.mdc)

packages/components/src/ui/**/*.tsx: Build on @radix-ui components as the foundation for base UI components
Follow the component composition pattern for UI components that accept form integration

Files:

• packages/components/src/ui/select.tsx

packages/components/src/ui/*.{tsx,ts}

📄 CodeRabbit inference engine (.cursor/rules/form-component-patterns.mdc)

Base UI components should be named as ComponentName in ui/ directory

Files:

• packages/components/src/ui/select.tsx

**/*.{tsx,ts}

📄 CodeRabbit inference engine (.cursor/rules/form-component-patterns.mdc)

**/*.{tsx,ts}: Props interfaces should be named as ComponentNameProps
Form schemas should be named formSchema or componentNameSchema

Files:

• packages/components/src/ui/select.tsx

packages/components/src/{remix-hook-form,ui}/*.{tsx,ts}

📄 CodeRabbit inference engine (.cursor/rules/form-component-patterns.mdc)

Always export both the component and its props type

Files:

• packages/components/src/ui/select.tsx

{apps,packages}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/monorepo-organization.mdc)

{apps,packages}/**/*.{ts,tsx}: Use package name imports for published packages (e.g., import { TextField } from '@lambdacurry/forms/remix-hook-form')
Import from specific entry points (e.g., import { TextField } from '@lambdacurry/forms/remix-hook-form/text-field')
Do not use relative imports across packages (e.g., avoid import { TextField } from '../../packages/components/src/remix-hook-form/text-field')
Order imports: 1) external libraries, 2) internal package imports, 3) cross-package imports, 4) type-only imports (grouped separately)

Files:

• packages/components/src/ui/select.tsx

{apps,packages}/**/src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/monorepo-organization.mdc)

{apps,packages}/**/src/**/*.{ts,tsx}: Use relative imports within the same package (e.g., import { FormControl } from './form')
Use relative imports for sibling directories (e.g., import { Button } from '../ui/button')

Files:

• packages/components/src/ui/select.tsx

packages/components/src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/monorepo-organization.mdc)

packages/components/src/**/*.{ts,tsx}: Always export both component and props type (e.g., export { ComponentName }; export type { ComponentNameProps };)
Use named exports for components for better tree-shaking (e.g., export const ComponentName = ...; avoid default exports)
Avoid default exports for components
Use tree-shaking friendly exports

Files:

• packages/components/src/ui/select.tsx

{apps,packages}/**/src/**/*.{tsx,ts}

📄 CodeRabbit inference engine (.cursor/rules/monorepo-organization.mdc)

{apps,packages}/**/src/**/*.{tsx,ts}: Use kebab-case for component file names (e.g., text-field.tsx, data-table.tsx)
Match component name in PascalCase to the exported component from the file (e.g., text-field.tsx exports TextField)

Files:

• packages/components/src/ui/select.tsx

packages/components/src/ui/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/monorepo-organization.mdc)

Don't import from remix-hook-form package in ui components

Files:

• packages/components/src/ui/select.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/monorepo-organization.mdc)

Avoid circular dependencies

**/*.{ts,tsx}: Indent with 2 spaces, max line width 120, and use single quotes (Biome-enforced)
Use PascalCase for component and type names
Name hooks in camelCase with a use* prefix
Organize imports automatically with Biome
Use named exports only

Files:

• packages/components/src/ui/select.tsx

packages/components/src/**

📄 CodeRabbit inference engine (AGENTS.md)

Place all @lambdacurry/forms source under packages/components/src and treat it as the only editable source for the package

Files:

• packages/components/src/ui/select.tsx

**/*.tsx

📄 CodeRabbit inference engine (AGENTS.md)

**/*.tsx: Keep React components pure and fully typed
Define explicit props interfaces for React components
Use React 19 ref patterns (forwardRef, useImperativeHandle as appropriate)

Files:

• packages/components/src/ui/select.tsx

**/*.{ts,tsx,mdx}

📄 CodeRabbit inference engine (AGENTS.md)

Use kebab-case for filenames (e.g., text-field.tsx, data-table-filter/**)

Files:

• packages/components/src/ui/select.tsx

packages/**/src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Avoid cross-package relative imports in the monorepo

Files:

• packages/components/src/ui/select.tsx

🔇 Additional comments (3)

packages/components/src/ui/select.tsx (3)

52-53: LGTM! Clear documentation and proper typing.

The prop definition follows coding guidelines with appropriate typing and a descriptive comment.

---

79-79: Good default value for backward compatibility.

Defaulting to false ensures existing usage is unaffected.

---

102-107: Notify parent on clear

• Call searchInputProps?.onValueChange?.('') when clearing to keep external handlers in sync:

   // When closing, optionally clear the search query to reset the input value
   useEffect(() => {
     if (!popoverState.isOpen && clearSearchOnClose) {
       setSearchQuery('');
+      searchInputProps?.onValueChange?.('');
     }
   }, [popoverState.isOpen, clearSearchOnClose]);

• Verify this behaves correctly when the input is controlled via searchInputProps.value.

---

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