[Bug]: NumberInput Steppers dont pass value to onChange

[chrisdudley]

Package

@carbon/react

Browser

Chrome

Package version

1.39.0

React version

18.2.0

Description

NumberInput steppers don't pass the value to the onChange handler.

    <NumberInput
      helperText="Optional helper text"
      id="tj-input"
      invalidText="Number is not valid"
      label="Number input label"
      onChange={(e) => onValueChange(e.target.value)}
    />

The above code works correctly when a value is typed into the field, but if the steppers are used then e.target.value is never set because e.target is the SVG icon.

This used to work in Carbon 10, but we recently upgraded to 11 and so now being affected by this bug.

Reproduction/example

https://codesandbox.io/s/cool-darkness-z6lv6n?file=/index.js

Steps to reproduce

Use the steppers to change the value and then look at the console - if you type in the number field it will correctly tell you the value, if you use the steppers then you just get undefined.

Suggested Severity

None

Application/PAL

IBM API Connect

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tw15egan]

The onChange also passes along extra data so that the values can be captured properly when the change is fired from the steppers:

Here's an example: https://stackblitz.com/edit/github-vc9epf?file=src%2FApp.jsx

[chrisdudley]

@tw15egan that works perfectly, thank you so much for the help!