mui-tel-input icon indicating copy to clipboard operation
mui-tel-input copied to clipboard

Integrating MUI Autocomplete for searching and filtering countries

Open ja153903 opened this issue 2 years ago • 17 comments

This PR integrates an alternative modal to the FlagsMenu that allows for the selection of a calling code via countries. This method integrates MUI's Autocomplete component to allow users to type and filter the list of countries to easily find their desired calling code.

Comments are appreciated!

ja153903 avatar Feb 24 '23 04:02 ja153903

image

viclafouch avatar Mar 14 '23 14:03 viclafouch

@viclafouch Thanks for looking through! I'll make the updates.

ja153903 avatar Mar 14 '23 17:03 ja153903

i need this feature 🥲

riadhtrvlcode avatar Mar 24 '23 09:03 riadhtrvlcode

@viclafouch I've addressed your initial concerns. Let me know if there's anything else you want me to consider looking into.

ja153903 avatar Mar 24 '23 17:03 ja153903

Let me take a look this weekend ;)

ty !!

viclafouch avatar Mar 24 '23 20:03 viclafouch

At the moment I have to issues with the current implementation (apart from styling ;) )

  • For me (Chrome, Win10) the autocomplete doesn't work because MUI Menu captures keyboard inputs to jump to the item that starts with the letter of the key pressed. So my key strokes never even reach the input.
  • If you have a default or pre-selected country, the list automatically scrolls down and you can't even see the input on top. muitelinput

emkayy avatar Apr 05 '23 11:04 emkayy

At the moment I have to issues with the current implementation (apart from styling ;) )

  • For me (Chrome, Win10) the autocomplete doesn't work because MUI Menu captures keyboard inputs to jump to the item that starts with the letter of the key pressed. So my key strokes never even reach the input.

  • If you have a default or pre-selected country, the list automatically scrolls down and you can't even see the input on top. muitelinput

        [
    
    
            ![muitelinput](https://user-images.githubusercontent.com/731228/230065387-3fd3ad5c-4fe3-4c6c-a40e-347879d69b4f.gif)
          ](https://user-images.githubusercontent.com/731228/230065387-3fd3ad5c-4fe3-4c6c-a40e-347879d69b4f.gif)
    
    
    
    
    
    
    
    
    
    
    
          [
    
    
    
          ](https://user-images.githubusercontent.com/731228/230065387-3fd3ad5c-4fe3-4c6c-a40e-347879d69b4f.gif)
    

Is this your own implementation? I'm quite sure this isn't how I've implemented this.

ja153903 avatar Apr 05 '23 14:04 ja153903

@ja153903 Hey! I just noticed we're using this library on one of our projects and I'm being asked to add this feature. Do you think this will be implemented any time soon or should I look for something else/build something from scratch?

ManuC84 avatar Aug 10 '23 18:08 ManuC84

Hello ! We need this feature 🙏

mi-mazouz avatar Sep 27 '23 06:09 mi-mazouz

Would love to use this library, just need that search ability added!

ericfeldman-RCM avatar Sep 29 '23 17:09 ericfeldman-RCM

Hey ! Please resolve conflict and then I will merge the PR !

Sorry for the delay !

Ty !

viclafouch avatar Oct 11 '23 13:10 viclafouch

we need this feature please when this feature is available ?

riadhtrvlcode avatar Nov 13 '23 11:11 riadhtrvlcode

Would love to get this in as well! Let me know if there is a way to help.

jakeisnt avatar Nov 22 '23 12:11 jakeisnt

Looks like just a few conflicts from getting this merged. Would be a great addition to the library. Following for release! 😄

graysonhicks avatar Dec 01 '23 21:12 graysonhicks

+1

yotamberk avatar Apr 18 '24 05:04 yotamberk

+1

maciejtatol avatar Aug 15 '24 12:08 maciejtatol