-
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. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 8 replies
-
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 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 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. |
Beta Was this translation helpful? Give feedback.
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 …