# NumberInput Field Not updated

**URL:** <https://community.dynatrace.com/t/numberinput-field-not-updated/42800>\
**Category:** Developer Q&A Forum\
**Tags:** custom-app, coding-assistance\
**Created:** [November 23, 2023, 8:49am UTC](https://community.dynatrace.com/t/numberinput-field-not-updated/42800 "2023-11-23T08:49:32Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![gilgi](https://dub1.discourse-cdn.com/dynatrace/user_avatar/community.dynatrace.com/gilgi/32/11747_2.png) [@gilgi](https://community.dynatrace.com/u/gilgi)\
**Post date:** [November 23, 2023, 8:49am UTC](https://community.dynatrace.com/t/numberinput-field-not-updated/42800/1 "2023-11-23T08:49:32Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![sinisa\_zubic](https://dub1.discourse-cdn.com/dynatrace/user_avatar/community.dynatrace.com/sinisa_zubic/32/32498_2.png) [@sinisa\_zubic](https://community.dynatrace.com/u/sinisa_zubic)\
**Post date:** [November 23, 2023, 10:12am UTC](https://community.dynatrace.com/t/numberinput-field-not-updated/42800/2 "2023-11-23T10:12:25Z")

</div>

Hi&nbsp;[@gilgi](https://community.dynatrace.com/user/12008)

I could not reproduce your problem. I tried it out locally and also in [code sandbox](https://codesandbox.io/p/devbox/reverent-sound-x67lr7?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clpb100nz0008356il9wtss92%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clpb100nz0003356ix27z4oiv%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clpb100nz0005356iytimg0dp%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clpb100nz0007356ib2kkogzg%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clpb100nz0003356ix27z4oiv%2522%253A%257B%2522id%2522%253A%2522clpb100nz0003356ix27z4oiv%2522%252C%2522tabs%2522%253A%255B%255D%257D%252C%2522clpb100nz0007356ib2kkogzg%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clpb100nz0006356i5yyv6208%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clpb100nz0007356ib2kkogzg%2522%252C%2522activeTabId%2522%253A%2522clpb100nz0006356i5yyv6208%2522%257D%252C%2522clpb100nz0005356iytimg0dp%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clpb100nz0004356id721f9vy%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%255D%252C%2522id%2522%253A%2522clpb100nz0005356iytimg0dp%2522%252C%2522activeTabId%2522%253A%2522clpb100nz0004356id721f9vy%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D)

Here my code snippet

```markup
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

---

<div class="post-metadata">

**Author:** ![gilgi](https://dub1.discourse-cdn.com/dynatrace/user_avatar/community.dynatrace.com/gilgi/32/11747_2.png) [@gilgi](https://community.dynatrace.com/u/gilgi)\
**Post date:** [November 23, 2023, 10:33am UTC](https://community.dynatrace.com/t/numberinput-field-not-updated/42800/3 "2023-11-23T10:33:21Z")

</div>

Hi&nbsp;[@sinisa\_zubic](https://community.dynatrace.com/user/38283)&nbsp;,

My Form field is defined as follows

```javascript
<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&nbsp;react-hook-form.

The fuield Is defined as follows:

```javascript
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.

---

<div class="post-metadata">

**Author:** ![sinisa\_zubic](https://dub1.discourse-cdn.com/dynatrace/user_avatar/community.dynatrace.com/sinisa_zubic/32/32498_2.png) [@sinisa\_zubic](https://community.dynatrace.com/u/sinisa_zubic)\
**Post date:** [November 23, 2023, 1:21pm UTC](https://community.dynatrace.com/t/numberinput-field-not-updated/42800/4 "2023-11-23T13:21:48Z")

</div>

not sure what the issue is here. We have just tried it in&nbsp;[codesandbox, please have a look](https://codesandbox.io/p/devbox/strato-text-number-input-forked-gwvxc6?file=%2Fsrc%2FApp.tsx%3A49%2C3&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clpb7xb430009356jsoq5g7aj%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clpb7xb420004356jrtspivn6%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clpb7xb420006356jpurs5ath%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clpb7xb430008356jinm82oav%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clpb7xb420004356jrtspivn6%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clpb7xb420003356jjx3ph9b3%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A49%252C%2522startColumn%2522%253A3%252C%2522endLineNumber%2522%253A49%252C%2522endColumn%2522%253A3%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252FApp.tsx%2522%257D%255D%252C%2522id%2522%253A%2522clpb7xb420004356jrtspivn6%2522%252C%2522activeTabId%2522%253A%2522clpb7xb420003356jjx3ph9b3%2522%257D%252C%2522clpb7xb430008356jinm82oav%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clpb7xb430007356j6d2q520m%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clpb7xb430008356jinm82oav%2522%252C%2522activeTabId%2522%253A%2522clpb7xb430007356j6d2q520m%2522%257D%252C%2522clpb7xb420006356jpurs5ath%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clpb7xb420005356j5mocxofo%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%255D%252C%2522id%2522%253A%2522clpb7xb420006356jpurs5ath%2522%252C%2522activeTabId%2522%253A%2522clpb7xb420005356j5mocxofo%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D)

Kudos to&nbsp;[@thomas\_heller](https://community.dynatrace.com/user/7207)&nbsp;for the quick reproducer.

Best,  
Sini

---

<div class="post-metadata">

**Author:** ![gilgi](https://dub1.discourse-cdn.com/dynatrace/user_avatar/community.dynatrace.com/gilgi/32/11747_2.png) [@gilgi](https://community.dynatrace.com/u/gilgi)\
**Post date:** [November 24, 2023, 1:18pm UTC](https://community.dynatrace.com/t/numberinput-field-not-updated/42800/5 "2023-11-24T13:18:38Z")

</div>

Thanks&nbsp;[@thomas\_heller](https://community.dynatrace.com/user/7207)&nbsp;.

[@sinisa\_zubic](https://community.dynatrace.com/user/38283)

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

Gil.

---

<div class="post-metadata">

**Author:** ![sinisa\_zubic](https://dub1.discourse-cdn.com/dynatrace/user_avatar/community.dynatrace.com/sinisa_zubic/32/32498_2.png) [@sinisa\_zubic](https://community.dynatrace.com/u/sinisa_zubic)\
**Post date:** [November 27, 2023, 12:36pm UTC](https://community.dynatrace.com/t/numberinput-field-not-updated/42800/6 "2023-11-27T12:36:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sinisa\_zubic](https://dub1.discourse-cdn.com/dynatrace/user_avatar/community.dynatrace.com/sinisa_zubic/32/32498_2.png) [@sinisa\_zubic](https://community.dynatrace.com/u/sinisa_zubic)\
**Post date:** [November 28, 2023, 4:06pm UTC](https://community.dynatrace.com/t/numberinput-field-not-updated/42800/7 "2023-11-28T16:06:40Z")

</div>

Hi&nbsp;[@gilgi](https://community.dynatrace.com/user/12008)

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](https://react-hook-form.com/get-started#IntegratingwithUIlibraries), to use Controllers.

Here you have a [codebox sample with NumberInput field](https://codesandbox.io/p/devbox/strato-text-number-input-forked-gwvxc6?file=%2Fsrc%2FApp.tsx%3A12%2C8-12%2C18). That is the way you also need to adapt your code.

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

Best,  
Sini