@defencedigital/react-component-library 3.8.2 and the NumberInput control

[RichardP932]

Hello I am using the NumberInput control within a react project.

If I replace 'return 0;' with 'return -1;' it displays -1.
If I replace 'return 0;' with 'return 1;' it displays 1.
If I replace 'return 0;' with 'return 0;' the display is empty.

The requirement is to display a 0 in the number text input when the currentValue is 0.

Does anyone know how I get this to display 0?

Thank you.

const SetPostScore = () => {
const postScore = formData.currentValue;
if (postScore === 0) {
return 0;
}
return postScore;
}

<ScoreNumberInput
name="currentValue"
onChange={onChangeNumberInput}
onBlur={onBlur}
min={0}
max={100}
value={ SetPostScore() }
suffix={record.isPercentage ? '%' : undefined}
size="forms"
/>

const { spacing } = selectors

The code to style the component is here;

export const ScoreNumberInput = styled(NumberInput)display: inline-block; width: 24rem; margin-right: ${spacing('4')}; Padding: ${spacing('0')}

[jpveooys]

Hi @RichardP932

Thanks for the question. I can see the same behaviour in Storybook; I would've expected the component to differentiate between null and 0 so this seems to be a bug. I'll create an issue for this.

Thanks again!

Edit: The issue is #3277

[jpveooys]

Hi @RichardP932

Please try version 3.9.2 which has a fix to make sure initial values of 0 are displayed correctly.

Thanks