NumberInput's onChange event does not include the value in event.target.value when the arrows are used.

[blechner]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you're having.

When using the arrows on the NumberInput component, the event
parameter of onChange does not contain the actual value in event.target.value. Instead, the value is only in event.imaginaryTarget.value. However, when typing the number directly in the component, both event.target.value and event.imaginaryTarget.value contain the correct number I am typing.

Is this issue related to a specific component?

Yes, NumberInput.

What did you expect to happen? What happened instead? What would you like to
see changed?

I would like to see event.target.value contain the correct number when typing directly and also when using the up and down arrows.

What browser are you working in?

Firefox and Chrome

What version of the Carbon Design System are you using?

carbon-components.react 7.17.0

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?

Steps to reproduce the issue

Instantiate a NumberInput, add the onChange={(event) => {...}} property and print the event.target.value. Then use the arrows in the component. The printed value will be sometimes undefined, and sometimes empty string. By typing in the component, the values of the printed event.target.value will be the expected ones.

Please create a reduced test case in CodeSandbox

• Style and vanilla JS:
  https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/components/examples/codesandbox
• React:
  https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox

Additional information

• Screenshots or code
• Notes

[diego-codes]

I was just about to report this as well. Thanks, @blechner!

[tanyabot]

Same @blechner and @diego-codes! Also getting typescript errors when using imaginaryTarget as it does not exist on type 'ChangeEvent<HTMLInputElement>'. Hopefully we'll get a response/fix soon

[andreancardona]

Adding this to our backlog to take a deeper look into it! @blechner @diego-codes thanks for reporting!

[guesant]

same issue with carbon-components@^10.30.0 and carbon-components-react@^7.30.0

Why is e.target the arrow button clicked at NumberInput's onChange event?