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

Feature request: Autoselect country on paste

Open PetoFeFe opened this issue 1 year ago • 6 comments

I would like to have this functionality:

CCS = Current country selected

CCS: SK (+421) paste phone number: +4300000000000 (AT) Country changes to AT (+43)

CCS: AT (+43) paste phone number: +421000000000 (SK) County changes to SK (+421)

Is it possible to implement this functionality? Thanks

PetoFeFe avatar Mar 13 '23 15:03 PetoFeFe

https://user-images.githubusercontent.com/23353836/225022095-250a2b5b-4af3-4fa6-a549-0af79fb8a9a8.mov

I don't understand, this is already done ?

viclafouch avatar Mar 14 '23 13:03 viclafouch

Maybe I can provide some more context on this issue. It would seem that there's actually scenarios where this is a problem.

Scenario 1: forceCallingCode is enabled

In this scenario, the +44 is separated and when you select inside the box and try to paste a +44 number (+447908123456) it does nothing, and when you console.log from the onChange handler it prints +44 only so it recognises a change but does nothing.

With +447908123456 number

image

With 07908123456 number

image

Scenario 2: forceCallingCode is disabled

The exact same thing happens as shown above, however, because the +44 is now included in the input, you can highlight the whole text and paste in a new value and that works fine but if I paste this number (+447908123456) after the +44 in the input it will not paste.

I have to highlight the input in order to overwrite the value if I want to overwrite with a number like +447908123456 image

badddams avatar Apr 06 '23 08:04 badddams

i have encountered the same issue myself when forceCallingCode is enabled. Pasting in 07557123456 works great and onChange -> info.numberValue yields +447557123456.

However pasting in +447557123456 directly into the input causes nothing to happen.

sammalloyxydus avatar Apr 18 '23 13:04 sammalloyxydus

Same here

Jontii avatar Aug 24 '23 13:08 Jontii

I use this, until this great lib has that capability.

onPaste={e => {
        e.preventDefault();

        const clipboardData = e.clipboardData;
        const pastedData = clipboardData.getData('Text');

        if (matchIsValidTel(pastedData)) {
          setValue(pastedData);
        }
      }}

melihplt avatar Feb 09 '24 07:02 melihplt

Ok, so the solution here is :

If we have forceCallingCode to false (so we have for example "+33" that we can't edit) and if we paste a phone number that starts with '+', the country has to change, right ?

Same for forceCallingCode to true I would say ?

viclafouch avatar Feb 14 '24 11:02 viclafouch

@viclafouch You're right. Any chance to implement this soon ?

apsylone avatar May 06 '24 09:05 apsylone