Skip to content

[FE-19] Build DocumentSearchBar component #516

@mftee

Description

@mftee

Problem

There is no search input in the document list. Users with many documents must scroll through paginated results to find a specific one, with no way to filter by keyword.

Proposed Solution

Create a DocumentSearchBar component inside frontend/module/components/document-search/ that provides a debounced live search experience.

Acceptance Criteria

  • Renders a text input with a search icon and a clear (X) button that appears when the input has a value
  • Debounces input by 350ms before triggering a search to avoid excessive API calls
  • Calls GET /api/module/documents/search?q= with the current input value and passes results back via an onResults callback prop
  • Shows a loading spinner inside the input while the search request is in flight
  • Shows a No results found message when the API returns an empty array
  • Clears results and resets state when the clear button is clicked or the input is emptied
  • Is fully keyboard accessible — search triggers on Enter, clear triggers on Escape
  • All component files live inside frontend/module/components/document-search/

Metadata

Metadata

Labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions