Bug: Searching 'India' in country selection is not working as expected

[Tanuj1718]

Describe the bug
When we search for India in country selection , it is not working as expected. It is working fine for others.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://care.ohc.network/users/careadmin
2. Click on Edit user
3. Try to search for India in country selection
4. See error

Expected behavior
When we search for India, it should appear at first.

Screenshots

Screen.Recording.2025-03-14.at.8.42.07.AM.mov

---

🚨 DO NOT EDIT BELOW THIS LINE 🚨

Instructions for Requesting Assignment:

To request assignment, please clearly outline your solution and timeline by commenting on the issue using the format below:

Describe your solution clearly:
Provide a detailed explanation of your proposed solution, including your approach, key implementation steps, and relevant examples or references. Mention any dependencies, assumptions, or risks you foresee that might affect your timeline or implementation.

Expected Timeline:

• End date: [Expected submission date of a completed Pull Request]

Additional Context:
Include any other relevant context, links, screenshots, or resources that support your proposed solution.

🚨 Your assignment may be unassigned if there is no activity or progress within the stated timeline unless communicated clearly and agreed upon.

[Tanuj1718]

@rithviknishad @Jacobjeevan I would like to work on it, if it is valid
ETA: 16 March

[rithviknishad]

Please describe the root cause of the issue and how you are planning to solve this? The ETA should be said based on that!

[Tanuj1718]

Please describe the root cause of the issue and how you are planning to solve this? The ETA should be said based on that!

It is due to the return type of Flag Component. In it we are passing country name which contains all the countries. So when we are rendering flag component and giving it title as countryName , it is showing this behaviour. Since it is necessary to give the title to the component, we can give it country code as a title. It is working fine when we are passing country code as title.🤔 Still trying to find why this is happening.

EDIT: Root cause is scrolling. Scroller moves at the last of the list.

Screen.Recording.2025-03-14.at.1.32.19.PM.mov

[Tanuj1718]

@rithviknishad Can i get it assigned as I have solved it.
I have used useRef for scroll area and tracking input changes. So whenever input changes scroller moves to the top.

Screen.Recording.2025-03-14.at.6.44.40.PM.mov

[rithviknishad]

that's just fixing some side effect of some other problem. the root cause is not solved yet.

why does it scroll to the bottom in the first place?

[Tanuj1718]

that's just fixing some side effect of some other problem. the root cause is not solved yet.

why does it scroll to the bottom in the first place?

@rithviknishad Shadcn component causing this issue but I am not able to find where exactly it is. The only solution I know is to forcefully moves the scroller at the top. Can you give some idea?

[hrit2773]

@Tanuj1718 @rithviknishad the issue lies with the radix ui in the phone-input the default search is causing the scroll to get focussed which is eventually pushing them down and when you type back its pushing the scroll up its better to remove the scrollArea in phone-input and write a custom filter after setting shouldFilter attribute of command to False. Your thoughts?? its happening in the login page phone number input also