svelte icon indicating copy to clipboard operation
svelte copied to clipboard

Automatically remove leading zeros in number inputs

Open vdawg-git opened this issue 2 years ago • 2 comments

Describe the problem

The problem: The displayed value of the number input field can be: 000100 But I want: 100 Svelte automatically converts number-inputs from string to number, which is awesome. However, converting it to a string to remove the leading zeros and then to a number again, which usually solves the issue, results in the same value and thus Svelte does not trigger a render of the "new " value.

Describe the proposed solution

It should just work automatically.

Alternatives considered

I am still searching for ways to solve this problem.

Importance

would make my life easier

vdawg-git avatar Jul 20 '22 11:07 vdawg-git

Do you have a REPL showing what you're trying to do now? This sounds like #7696, which is related to how reactivity works.

Conduitry avatar Jul 20 '22 12:07 Conduitry

@Conduitry For some reason the window to authenticate with my Github instantly closes on the repl, but here is the code for the repl:

<script>
	let input
	
	let value = 100
	
	function removeLeadingZeros() {
		value = Number( value.toString()) // Usually removes leading zeros
	}

</script>

<input type="number" bind:value 
			 on:input={removeLeadingZeros} 
			 bind:this={input} 
			 id="x"
			 >
<p>
	^ It is possible to input the "number" 00100
</p>

<div>
	Numeric value of the variable:
	{value}
</div>

And yes, it is basically #7696 and the answer of @stephane-vanraes solves it quite well. (Thanks man :) ) I just think that there is no use-case for the leading zeros and that it might be a nice feature for Svelte to do this automatically.

vdawg-git avatar Jul 20 '22 12:07 vdawg-git