Update the value from outside

[HoekWax]

Hello,

Is there away to update the value from the outside ?

I can reset it but I don't know how to change it to another value. For now I unmount the component for 1ms and mount it again with a new default value.

Thanks

[gyurielf]

At this point you can't do this via the component, because the point was to sanitize and standardize the entered user input. What is the use case for changing value from outside after the mount ?

[HoekWax]

Oh ok, well it making it disappear and appear again works, i set up a second placeholder input right behind so that there the user still sees an input during the unmount/remount of the input.

I am making an autocomplete, when the user starts typing the number, I show under the input all the phone numbers that could match, if the user click on one, I fill the input with the number.

You can close this if you don't plan on implementing it

[gyurielf]

I'll investigate that, how possible to implement.

[bosticka]

If you pass in an id to the TelInput component like so:

	<TelInput
		bind:country={selectedCountry}
		bind:detailedValue
		bind:value
		bind:valid
                id={e164Input_id}
		{options}
         />

Then you can grab the reference to the underlying input and set the value there like so:

        let el = document.getElementById(e164Input_id);
        el.value = your_value;

This is my current workaround for changing the value of an already mounted svelte-tel-input component.

The only downside for me is it doesn't format the value you set it to.

Could you possible export the handleParsePhoneNumber function so we could bind to the TelInput component and call this whenever we need to programmatically set the value?

[gyurielf]

If you pass in an id to the TelInput component like so:

	<TelInput
		bind:country={selectedCountry}
		bind:detailedValue
		bind:value
		bind:valid
                id={e164Input_id}
		{options}
         />

Then you can grab the reference to the underlying input and set the value there like so:

        let el = document.getElementById(e164Input_id);
        el.value = your_value;

This is my current workaround for changing the value of an already mounted svelte-tel-input component.

The only downside for me is it doesn't format the value you set it to.

Could you possible export the handleParsePhoneNumber function so we could bind to the TelInput component and call this whenever we need to programmatically set the value?

Hey!

Yep, that was my first thought too, just have to test it.

I'll make a PR soon.

[ramonvictorn]

I also would like to have this, for my use case is simple: I'm using sveltekit with stream requests, so, the page is loaded before I have the data and also the default values for the inputs.

So In the initial render I don't have the values and after some time the request is finished with the values. I'm using SPA mode.

Why not is possible to just update the values, even when using bind?

[gyurielf]

Hey! I'm pretty busy with working, but the PR is on the way which solve this issue. (this part is actually done, but that PR contains breaking changes) Binding is not possible because the value inside the input is not exactly the same with the value of the component.

[zulfiqarlaili]

Oh ok, well it making it disappear and appear again works, i set up a second placeholder input right behind so that there the user still sees an input during the unmount/remount of the input.

I am making an autocomplete, when the user starts typing the number, I show under the input all the phone numbers that could match, if the user click on one, I fill the input with the number.

You can close this if you don't plan on implementing it

Hey, thank you for the suggestion. I'm applying this to my project too. May God bless you in any way possible.

[bosticka]

Are you still planning on making handleParsePhoneNumber available as a component method?

Thanks!

[gyurielf]

Are you still planning on making handleParsePhoneNumber available as a component method?

Thanks!

Hey! I was on holiday and in the new year project starts like hell. So I'm pretty busy. This part is also done. There will be an update method which will be exposed, to handle this.

The main reason for that PR is so late is the national number handling and parsing... maybe the international format will be the default and only format. We'll see.

[dannypule]

@gyurielf I wanted to ask about the status of the PR with this change please? Like the other commenters, I also need to set the value from outside the component after the initial render due to technical constraints

[gyurielf]

Hello Danny!

Well, it is rewritten from scratch to make things simple. I had another project as well, so I can't promise anything. But I think I can make a fix for this in v3. I'll look into it on sunday/monday.

BR, George.

[DingbatDev]

The ability to edit/add from outside the component would be nice. I am using some touch buttons for adding to the number for convenience. I'll try the workarounds about in the meantime.

[gyurielf]

Alright guyz.

You can find the details in the PR. https://github.com/gyurielf/svelte-tel-input/pull/216

updateValue(val: string | E164Number | null, country?: CountryCode | null);

Later i'll extend the docs.

[DingbatDev]

Thank you, got it!