NumberInput Field Not updated

[gilgi]

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.

[sinisa_zubic]

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

[gilgi]

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.

[sinisa_zubic]

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

[gilgi]

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.

[sinisa_zubic · Accepted solution]

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

[sinisa_zubic]

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