Search Input State Not Reset After Submission
Overview
This MR fixes the volunteer search flow so that when a user enters a volunteer search value, moves forward in the flow, and then navigates back to the volunteer search screen, the previous volunteer search state does not persist.
A volunteer-specific reset handler was added following the same pattern as resetToBookSearch, ensuring the volunteer flow returns to a clean search state and avoids showing stale input, selected data, errors, or previous result/detail state.
What does this MR do and why?
- Adds a volunteer search reset handler to clear volunteer-specific search state when navigating back.
- Previously, volunteer search state could remain populated after moving forward and returning, causing stale input, selection, errors, or previous results to appear.
- The new reset handler keeps the behavior consistent with the existing
resetToBookSearchflow for patients/books. - Implementation is minimal, scoped only to volunteer-related files, aligned with existing code style and UI state handling patterns.
Changes Made
- Modified volunteer-related page/search flow files only.
- Added volunteer reset handler similar in style to
resetToBookSearch. - Clears:
- Volunteer search input value
- Selected volunteer/search result state
- Volunteer search error state
- Volunteer dropdown/results/detail visibility state
- Returns the volunteer UI to the initial search view state.
Technical Details
Root Cause: Volunteer flow did not reset local search-related state when navigating back, leaving previous input and selection in memory.
Related Issues / References
Related issue: Search Input State Not Reset After Submission Branch: fix/search-input-reset #224 (closed)
Screenshots
| Before | After |
|---|---|
| Search input retained the previously entered book number after submission | Search input automatically clears after submission |
| Users had to manually delete the previous value | Users can directly enter a new book number |
| Slower workflow during patient lookup | Faster and smoother patient lookup process |
Install dependencies:
npm install
Run the development server:
npm run dev
Verify: -Navigate to the patient search / book number lookup section -Enter a book number in the search input -Click Check / Submit -Confirm that the patient lookup works correctly -Verify that the search input field is cleared automatically after submission
Testing Done Manual testing completed Unit tests added/updated
| Scenario | Expected Result | Status |
|---|---|---|
| Enter book number and submit | Patient lookup works correctly | |
| Submit input | Input field resets automatically | |
| Enter new book number | No need to manually clear previous value |
Code Quality Checklist
Code Quality Checklist
-
Code follows conventions -
No console.log/debugger statements -
No unused imports/variables/functions -
No duplicate code -
i18n check passed -
TypeScript types properly defined -
ESLint/Prettier checks pass:
React Best Practices
-Components are properly split and single-responsibility -Hooks follow rules -State management is appropriate -No unnecessary re-renders -Event handlers are properly cleaned up
Component Patterns Tailwind classes follow utility-first approach Responsive design considered Accessibility attributes included
API & Data Fetching Existing functionality unchanged
Error Handling No new errors introduced
Documentation
README.md updated .env.example updated CHANGELOG.md updated


