topic Re: NumberInput Field Not updated in Developer Q&A Forum

NumberInput Field Not updated

gilgi — Thu, 23 Nov 2023 08:49:32 GMT

Hi,

I believe I've lost all ideas and would appreciate your help. I have a form that includes both Text Inputs and NumberInputs.

Wheneever a state value changes and I set the a textInput value appropriately it happens immediatly. Whenever I'm changing a NumberInput field value, I only see the change when the field gets focus. Search Dr. Google and React Hook Forms as well and could not find any more ideas.

Anything you can think of?

Gil.

Re: NumberInput Field Not updated

sinisa_zubic — Thu, 23 Nov 2023 10:12:25 GMT

Hi @gilgi

I could not reproduce your problem. I tried it out locally and also in code sandbox

Here my code snippet

import { Button, FormField, Grid, NumberInput, Page, TextInput } from "@dynatrace/strato-components-preview"; import React, { useState } from "react"; export default function App() { const [textValue, setTextValue] = useState("initial value"); const [numValue, setNumValue] = useState<number>(0) const changeValues = () => { setNumValue(Math.random()); setTextValue("text value - " + Math.random()); } return ( <Page> <Page.Main> <Grid width="50%" gridTemplateAreas="'input' 'control'" > <Grid gridItem gridArea="input"> <FormField label="myformfield"> <TextInput placeholder="text input" value={textValue} /> <NumberInput placeholder="number input" value={numValue} /> </FormField> </Grid> <Grid gridItem gridArea="control"> <Button variant="accent" onClick={changeValues}>change</Button> </Grid> </Grid> </Page.Main> </Page> ); }

Can you maybe share your code snippet here?

Best,
Sini

Re: NumberInput Field Not updated

gilgi — Thu, 23 Nov 2023 10:33:21 GMT

Hi @sinisa_zubic ,

My Form field is defined as follows

<FormField label={<StyledLabel htmlFor="relativeWeight" required>Relative Weight</StyledLabel>}> <NumberInput id="relativeWeight" placeholder="e.g. 1.5" controlState={{ state: errors.relativeWeight ? 'error' : 'valid', hint: errors.relativeWeight?.message || 'Please enter the this component relative weight compared to its sieblings.', }} value={relativeWeight} {...register('relativeWeight', { required: { value: true, message: 'Please enter this component relative weight.', }, min: { value: 1, message: 'We do not support values lower than 1', }, })} onChange={(value) => { setRelativeWeight(value); setValue('relativeWeight', value, { shouldValidate: true }); haloAppContext.setEntityModified(true); }} /> </FormField>

I'm also using react-hook-form.

The fuield Is defined as follows:

var [relativeWeight, setRelativeWeight] = useState<number | null>(1);

and Setting is value using the setRelativeWeight doesn't change the display.

The weird thing is that when I place the mouse in the field itself and it gets the focus, than the value changes.

gil.

Re: NumberInput Field Not updated

sinisa_zubic — Thu, 23 Nov 2023 13:21:48 GMT

not sure what the issue is here. We have just tried it in codesandbox, please have a look

Kudos to @thomas_heller for the quick reproducer.

Best,
Sini

Re: NumberInput Field Not updated

gilgi — Fri, 24 Nov 2023 13:18:38 GMT

Thanks @thomas_heller .

@sinisa_zubic

So in fact this is reproducable. (when focusing on the field the set value disappears). Any thoughts on how to go around that or what could be the reason for it?

Gil.

Re: NumberInput Field Not updated

sinisa_zubic — Mon, 27 Nov 2023 12:36:45 GMT

This is a bug and the team is currently working on a fix. This is happening when you change the value of NumberField component programmatically.

One way you can overcome this to use another component like TextInput and add custom validation logic to it.

Sini

Re: NumberInput Field Not updated

sinisa_zubic — Tue, 28 Nov 2023 16:06:40 GMT

Hi @gilgi

I have some update from the team for you. The examples in our reference we have with the react-hook-form and useState hook have the same problem. And the way to go is, as also mentioned in the react hook form docs, to use Controllers.

Here you have a codebox sample with NumberInput field. That is the way you also need to adapt your code.

Updating the code examples in our reference will take some time.

Best,
Sini