Unable to correct inputted data in Patient and user management tab

[nihal467]

Describe the bug

• When we input a data inside a patient filters, we cant click in between the data and correct any one letter. For example, we inputted kozhikode and we want to replace o with k. Without removing the entire inputted data, it is not possible. ( By using arrow keys in keywords, it is possible but initially by clicking using mouse in the middle of the inputted data and correcting it is not possible )
• Similarly in the facility pop-up coming after clicking add patient button in the patient tab
• Similarly in the link facility pop-up coming after clicking link facility button in the user card
• similarly in the add user page in the user tab

To Reproduce

• https://care.coronasafe.in/patients
• https://care.coronasafe.in/users

Expected behavior

we should be able to edit it

Screenshots

[rithviknishad]

@khavinshankar @gigincg
I'm thinking of decoupling few things in this AsyncAutocomplete component as it's getting quite complicated and quite a lot of issues is arising with this component.

1. Autocomplete Component with loading prop instead of telling how to fetch values.

2. Handle the async fetching of data outside the component but inside FacilitySelect.

3. Seperate components for multi and single select, because the UI, UX, and functionality is different when it's single select and multi select.

UI: Selected value is inside the component in single select, but below the drop-down in multiselect.

UX: Single select auto close the drop-down after selecting one, but multi select the drop-down stays persistent and so more queries can be made and selected.

Functionality: return type is T in single select, return type is T[] in multiselect.

These are the similar reasons why I've already made MultiSelectMenuV2 and SelectMenuV2 components seperate.

[nihal467]

@rithviknishad once you solve it, let me know ASAP

[rithviknishad]

@nihal467 Mapping out the list of places which is expected to be affected by or are using AsyncAutoComplete directly / indirectly.

• All FacilitySelects.
  • AssetFilter: Facility
  • All FacilitiesSelectDialogues.
    • External Result: ResultList's Facility Select Dialog
    • Patients: ManagePatient's Facility Select Dialog
  • ConsultationForm Referred To Facility
  • PatientFilterV2 (Patient Advanced Filters, Facility Select)
  • SampleFilters Facility
  • Patient: ShiftCreate
    • Name of shifting approving facility
    • What facility would you like to assign the patient to
  • Resource: ListFilter
    • Origin Facility
    • Resource Approving Facility
    • Assigned Facility
  • ResourceCreate: Name of Approving Facility
  • ResourceDetailsUpdate
    • Name of resource approving facility
    • What facility would you like to assign the request to
  • Shifting: ListFilter
    • Origin facility
    • Shifting approving facility
    • Assigned facility
  • ShiftDetailsUpdate
    • Name of shifting approving facility
    • What facility would you like to assign the patient to
  • User's LinkFacilityDialog
  • User Add: Linked facilities
• All DistrictSelects.
  • PatientFilterV2 Advanced Patient Filters: District
  • UserFilter: District
• Patient Advanced Filters: LSG Body
• Consultation Form: Prescription Medication's Medicine Field
• Consultation Form: PRN Prescription's Medicine Field