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]

proof.mp4

@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 #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]

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

[gigincg]

@JOSHIK27 Will you be able to work on this? #7840 Has been merged.

[JOSHIK27]

@JOSHIK27 Will you be able to work on this? #7840 Has been merged.

Yes I can. But the pr #7840 is still open. I have set up the project again, still it is using the older version of headless ui.

[gigincg]

@nihal467 Update here once HeadlessUI v2 is merged

[nihal467]

@gigincg the migration to headless v2 PR is still in not completed, so for proper triaging purpose assigning it to you

[nihal467]

@JOSHIK27 the headless UI is merged,

cc: @gigincg

[JOSHIK27]

Here's the pr @nihal467 #8414