Phone number - is this example possible with react-select?

[gino]

Hey there,

I am currently working on a phone number input and would like to make it look something like this:

I am not sure if this is possible. I am wondering if it's possible to have a button like in the example, that opens and closes the options list and also changes based on the value, without having the actual full width select input. So I could dynamically open and close the options list.

Not quite sure how to do this at the moment with the libray, maybe someone else has an idea how to achieve something similar. Thanks a lot.

[ebonow]

Greetings @gino ,

Hope you don't mind that I added this to discussions as this pertains more to implementation rather than logging an issue with the library.

You can use react-select. There is a lot going on in the examples so let me try to break down how I would approach it.

From the looks of it, you aren't really filtering on anything other than the country code/area code. Since this is independent of the actual typed in phone number, I would use the Select only as the dropdown by setting isSearchable=false.

You would also need some kind of masking input.

When the masked input changes, you can parse it to determine if the country/are code changed, and if so, set the value of the select to correspond to the selection.

When the select changes, you can update the input text.

For the last example, you can refer to this example to get the "search" functionality
https://react-select.com/advanced#experimental

Let me know if you have any specific questions about the implementation as it would likely be easier to help you along the process if you create a codesandbox.

[ebonow]

Can you share a codesandbox of what you have so far?

[gino]

Of course! https://codesandbox.io/s/react-select-menuisopen-prop-xrkrn?file=/pages/index.js

I have no idea if this should be the right way to do this, I am just experimenting with many different things so correct me if I'm doing something wrong. But I basically wanna keep the options/menu list but get rid of the actual "input" and kinda got this working as you can see in the Codesandbox. The menu also closes when I select an option, but I would also like to make it close when I click away from the menu, like how this happens when I don't use the menuIsOpen prop at all.

[ebonow]

I don't think that you need to control the menuIsOpen prop until you get to the search popup example in the 4th example, but for time being I would leave it uncontrolled.

I don't know that you even need any custom components as you could simply render the difference between the selected option with the menu options using formatOptionLabel. If you add some source data it should be easier to get something in place quickly.

I'll include a quick sandbox with a css file I generated from twemoji that only includes their flag icons.
This might be a good starting point for you especially once you are able to get a masked input integrated into it.

https://codesandbox.io/s/react-select-global-phone-number-4ot7b

[gino]

Thanks a lot for this example! I ended up using your example and tweaking some styling things to fit the branding. This approach works great. I will most likely make the input searchable, if you enter "+31" for example, it would select "The Netherlands" with the corresponding flag. But this should be possible without any difficult things.

Thanks for this Codesandbox and for your help, finally got it working how I wanted it to be!

[ebonow]

@gino Glad to help? Would you mind sharing the codesandbox? I'd love to see a working example.