fix: Auto-close country codes dropdown when clicking outside the component

[UdaySagar-Git]

Proposed Changes

• Fixes Auto-close country codes dropdown when clicking outside the component #7557

@coronasafe/care-fe-code-reviewers @coronasafe/code-reviewers

Merge Checklist

• Add specs that demonstrate bug / test a new feature.
• Update product documentation.
• Ensure that UI text is kept in I18n files.
• Prep screenshot or demo video for changelog entry, and attach it to issue.
• Request for Peer Reviews
• Completion of QA

[vercel]

@UdaySagar-Git is attempting to deploy a commit to the Open Healthcare Network Team on Vercel.

A member of the Team first needs to authorize it.

[netlify]

✅ Deploy Preview for care-egov-staging ready!

Name	Link
🔨 Latest commit	065c869
🔍 Latest deploy log	https://app.netlify.com/sites/care-egov-staging/deploys/6627bbd103fa980008097205
😎 Deploy Preview	https://deploy-preview-7561--care-egov-staging.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[nihal467]

LGTM

[khavinshankar]

just a small refactor required

[rithviknishad]

Would it be possible to use one of the headlessui component to handle the dropdown/popover? So that we won't need a custom hook to handle click outside to begin with?

[UdaySagar-Git]

Would it be possible to use one of the headlessui component to handle the dropdown/popover? So that we won't need a custom hook to handle click outside to begin with?

will give it a try

[rithviknishad]

You can use the close method provided by headlessui to avoid hacks and using an additional useState.

https://headlessui.com/react/popover#closing-popovers-manually

[nihal467]

LGTM

[github-actions]

@UdaySagar-Git Your efforts have helped advance digital healthcare and TeleICU systems. 🚀 Thank you for taking the time out to make CARE better. We hope you continue to innovate and contribute; your impact is immense! 🙌