Number coercion doesn't appear to be working for Input components

[brucegl]

Hi,

I've been unsuccessfully trying to get string to number coercion to work on an object property.

This is what I've tried.

<script lang="ts">
import { Button } from '$lib/components/ui/button';
import { Label } from '$lib/components/ui/label';
import { Input } from '$lib/components/ui/input';

let myObject = {
  myValue: 2
};
</script>

<Label for="myValue">myValue</Label>
<Input type="number" id="myValue" bind:value={myObject.myValue} />
<Button
  on:click={() => {
    console.log('myObject.myValue', myObject.myValue);
    console.log('typeof myObject.myValue', typeof myObject.myValue);
 }}
 variant="outline">Submit</Button
>

This returns the following console output:
initially...

myObject.myValue 2
typeof myObject.myValue number

then after an input update...

myObject.myValue 3
typeof myObject.myValue string <======== changes to string

Trying in vanilla Svelte looks ok...

<script>
  let myObject = {a: 1};
  function printMyObject(myObject) {
    console.log('myObject:', myObject)
    console.log('typeof myObject.a:', typeof(myObject.a))
  }
</script>

<label>
  <input type="number" bind:value={myObject.a} />
</label>
<p>{myObject.a}</p>

<button on:click={() => printMyObject(myObject)}>
  Submit
</button>

This returns the following console output:
initially...

myObject {a: 1}
typeof myObject.a: number

then after an input update...

myObject { a: 2 }
typeof myObject.a: number <======== remains a number

Your thoughts would be welcome,
Gary

[shyakadavis]

Hello, @brucegl

I believe this is what you're looking for: #574 (comment)

I also believe this will work as expected in Svelte 5: sveltejs/svelte#10256 (comment)

[brucegl]

Hi @shyakadavis

I'm not using zod for now but have done my own workaround with parseInt/Float.

I'll be updating to Svelte 5 later in the year, so I'll report back then