useForm persist string values, but drops number values between re-renders.

[kondricz]

What package has an issue

@mantine/form

Describe the bug

Hello,

I have a situation where after every input change the component triggers a context update (debounced of course), therefore re-renders once the backend requests completed.

It appears that values saved in the useForm persisting between re-renders, only if they are saved as strings. Values saved as numbers are lost, when a re-render happens.

const form = useForm<SearchFormValues>({});

      <TextInput
        mb="md"
        placeholder="EXAMPLE"
        icon={<IconSearch size={14} />}
        {...form.getInputProps('example')}
        />

👆 This one would persist.

          <NumberInput
            label="EXAMPLE"
            radius="xs"
            hideControls
            value={form.values.example}
            onChange={(val) => form.setFieldValue("example", val)}
          />

👆 This one would NOT persist.

          <NumberInput
            label="EXAMPLE"
            radius="xs"
            hideControls
            value={form.values.example}
            onChange={(val) => form.setFieldValue("example", val)}
          />

👆 Like this (if number is put within backticks), the value would persist.

What version of @mantine/hooks page do you have in package.json?

5.0.2

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

No response

Are you willing to participate in fixing this issue and create a pull request with the fix

No response

Possible fix

It is not really a fix, but You can overcome this by parsing your input return value as a string.

[rtivital]

Hi @kondricz, please provide a codesandbox (template– https://codesandbox.io/s/mantine-template-9ze89?file=/src/App.tsx:0-6) with minimal reproducible example https://stackoverflow.com/help/minimal-reproducible-example. It is not possible to identify the issue without reproduction.

[rtivital]

Hi @kondricz feel free to reopen the issue if you can provide a sandbox