Skip to content

Add reusable SearchInput component and docs#219

Open
krowvin wants to merge 7 commits into
mainfrom
213-search-bar-component
Open

Add reusable SearchInput component and docs#219
krowvin wants to merge 7 commits into
mainfrom
213-search-bar-component

Conversation

@krowvin

@krowvin krowvin commented Mar 27, 2026

Copy link
Copy Markdown
Contributor

Summary

Adds a reusable SearchInput component to groundwork-water so district sites can share the
same search bar behavior without copying app-specific Redux/search code.

What changed

  • added SearchInput to the library export
  • built in debounced query handling, dropdown results, keyboard nav, and loading/empty/
    error states
  • made result rendering customizable while keeping a sensible default layout
  • added docs and a live example using OfficeDropdown with hasData
  • wired the docs example to the CDA catalog/LOCATIONS endpoint, matching @LaurenAllin current
    search approach

Notes

  • Takes an office and provides catalog entries, onSelect to override

@krowvin krowvin requested review from LaurenAllin and jbkolze March 27, 2026 07:23
@krowvin krowvin linked an issue Mar 27, 2026 that may be closed by this pull request

@LaurenAllin LaurenAllin left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This mostly works as expected - but I still need to test a few additional features. I added a commit with a suggested styling change to avoid the icon and the input text from overlapping.

A couple of suggestions:

  1. It would be nice to have an option to add an ignore/blacklist array into the component as a user defined/optional property, with a function in the SearchInput.tsx to filter out any ids that match an item in the array.
  2. There is not an endpoint that I can find that would allow this, but a nice to have in the future would be a way to search by public name rather than location id. A user might try to search for Lock and Dam XX, but this will return nothing. The user would have to know to search for LockDam_XX, which is not user friendly.

@LaurenAllin

LaurenAllin commented Jun 9, 2026

Copy link
Copy Markdown
Collaborator

Finished testing properties for the SearchInput component. All properties seem to be working as expected except for errorMessage. When the errorMessage is set to a string (i.e. errorMessage="Error"), the search box will only return the error message, even when there is no error.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Search Bar Component

2 participants