Skip to content

feat(prescription): implement clear (X) button for medicine input reset

Shanmukha varma Lanke requested to merge clear-button into fix/develop

Overview

This MR introduces a small but critical UI/UX improvement to the prescription flow by adding a clear (X) button inside the medicine input field. It allows users to quickly reset the selected medicine and its dependent fields without manual deletion, improving speed and accuracy during consultations.

What does this MR do and why?

This change addresses a usability gap in the prescription form where users could not easily clear a selected medicine. In real-world usage (especially in medical camps or OPD workflows), doctors frequently change selections, and manually deleting input slows them down and increases the risk of incorrect entries.

This MR introduces a minimal, non-intrusive solution:

  • A clear (X) button inside the input field
  • One-click reset of medicine and all dependent values

The approach is intentionally lightweight and frontend-only, avoiding any backend impact while significantly improving user efficiency.

Changes Made

  • Added clear (X) button inside medicine input field

  • Implemented conditional rendering (visible only when input has value)

  • Added reset logic for:

    • Medicine field
    • Dosage
    • Days
    • Time slots
    • Calculated quantity

  • Updated form state handling to support full reset

  • Minor UI adjustments for alignment and spacing

Technical Details

  • The root issue was lack of a reset mechanism for controlled form input

  • Introduced a handler (e.g., handleClearMedicine) to:

    • Reset local state
    • Trigger dependent field resets

  • Ensured no unnecessary re-renders by scoping state updates properly

  • Maintained existing form structure (single prescription per card)

Type of Change

  • 🐛 Bug fix (non-breaking change that fixes an issue)
  • ✨ New feature (non-breaking change that adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to change)
  • 📝 Documentation update
  • 🎨 UI/UX improvement
  • ♻️ Refactor (no functional changes)
  • ⚡ Performance improvement
  • 🧪 Test update
  • 🔧 Configuration change
  • 🚨 Security fix

Related Issues / References

  • Closes: Prescription UI improvement issue (Clear button for medicine input)

Screenshots or Screen Recordings

Before After
No clear option; manual deletion required X button available for instant clearing

How to Set Up and Validate Locally

  1. Checkout this branch:

    git checkout <branch-name>

  2. Install dependencies:

    bun install

  3. Run the app:

    bun dev

  4. Navigate to:

    • Manage Prescriptions modal

  5. Test flow:

    • Select a medicine
    • Observe X button appears
    • Click X button

  6. Expected behavior:

    • Medicine field clears
    • Dosage, days, time slots reset
    • No errors occur

Testing Done

  • Manual testing completed
  • Unit tests added/updated

Test Cases Covered:

Scenario Expected Result Status
Clear button visibility Visible only when input has value ✅
Clear action All fields reset correctly ✅
Empty field click No crash or error ✅
Form submission after clear Validation prevents submission ✅

Code Quality Checklist

Code Standards

  • Code follows project conventions
  • No console.log() or debugger statements
  • No unused code
  • No duplication
  • i18n considered (no hardcoded critical strings)
  • Proper TypeScript usage
  • ESLint & Prettier pass

React Best Practices

  • Component responsibility maintained
  • Hooks used correctly
  • State updates optimized
  • No unnecessary re-renders

Component Patterns

  • Consistent UI components
  • Tailwind styling followed
  • Accessibility (aria-label for clear button)
  • Responsive compatibility maintained

Error Handling

  • Graceful handling of empty state
  • No UI breakage on edge cases

Documentation

  • README.md update not required
  • No env changes

Known Limitations / Technical Debt

  • No animation added for clear action (can be improved later)
  • No analytics/logging for clear events
  • Assumes all dependent fields should reset (no partial retain option)

Additional Notes

  • This is a low-risk, high-impact UX improvement
  • No backend dependency
  • Keeps current prescription workflow intact (single prescription per card)
  • Designed for fast interaction in real-time medical usage scenarios

MR Acceptance Checklist

Evaluate this MR against the standard checklist to ensure quality, maintainability, and usability improvements are met.

Edited by Shanmukha varma Lanke

Merge request reports