[Help] format attribute is not working as expected

[aman-godara]

I need to use this library to deliver a behaviour such that a user can only type a number of the format "#.#" for eg: 1.2, 5.7, 9.9, etc. I don't want any round off functionality. So I came up with this hack to deliver the expected behaviour.

This is what I did:

<NumericInput
        className="numeric-input"
        // eslint-disable-next-line react/style-prop-object
        style={false}
        format={value => `${value.charAt(0)}.${value.charAt(value.length - 2)}`}
        strict
        precision={2}
        step={0.1}
        min={0.0}
        name="HbA1cScore"
        onChange={value => setUserInput(value)}
        value={userInput}
      />

it turns out the format attribute is not working as expected. On screen I see what is expected but the variable userInput has different state than what I see on screen.

I click on the input box and start typing as follows:
press 8 --> screen shows 8.0, value of userInput --> 8 [Good]
press 0 --> screen shows 8.0, value of userInput --> 80 [Bad]

Have I misunderstood the format feature? @vlad-ignatov

[moloko]

@aman-godara I think the precision setting is probably closer to giving you the behaviour you need

[aman-godara]

Thanks for the reply, precision rounds off which is not something that I want.
I am mostly struggling with format and value attributes. I read the documentation many times, but unable to make format and value attribute work in the project.
If you happen to know details of them i.e. the sequence in which they are called, I would be grateful. Does precision and other attributes are applied after value function or before. Knowing this sequence would be of great use to me.

[moloko]

@aman-godara TBH I'm seriously considering not moving forward with this component in my project - it has quite a few issues and doesn't appear to be actively developed.