Enhance the existing AutocompleteFormField component

[nihal467]

Is your feature request related to a problem? Please describe.

When we click on a component, such as the occupation input field in the patient registration form, it does not prefetch the entire list unless the user inputs a character.

Describe the solution you'd like

When the user clicks on the component, it should prefetch the entire list, and the dropdown should appear as shown in the screenshot below.

Note: it should filter the dropdown based on user input incase user type anything in the component

[609harsh]

@rithviknishad please assign this issue to me

[nihal467]

@609harsh I am unassigning you from this issue, as you already have an unfinished PR pending Cypress changes. Kindly work on that PR, before getting new issues assigned

[JOSHIK27]

I would like to take up this issue. Can you assign me @rithviknishad

[JOSHIK27]

https://github.com/coronasafe/care_fe/assets/96165631/f76387d3-645f-4316-bb55-9a9593b3547e

@nihal467 The requested feature can be achieved by adding a prop to the combo box headless UI component (Latest). For that, we will have to install this updated headless UI package. I have added a demo. Please let me know if this solution is ok, happy to open PR.

[rithviknishad]

@JOSHIK27 Yes go ahead!

You could use https://github.com/coronasafe/care_fe/pull/7840 as the base branch as that upgrades headless UI to the required version.

cc: @khavinshankar

[JOSHIK27]

@rithviknishad I am getting conflicts when rebasing my branch with develop branch to open pr (when worked with #7840 as base branch). I will open pr once conflict is resolved.

[github-actions[bot]]

Hi, @coronasafe/care-frontend-maintainers, This issue has been automatically marked as stale because it has not had any recent activity.