fix(number-input): adjust invalid logic and add proptype check for value

[abbeyhrt]

Closes #4294
Closes #4997
Closes #4996

Done during mob programming with @joshblack.
This PR adjusts the way that data-invalid and aria-invalid were being set by assigning all invalidation logic to isInputInvalid and adjusts the min/max valid check so that allowEmpty works as expected. This expands the proptype check for value and defaultValue to include string so that the allowEmpty state of '' doesn't create a warning and then adds a check in getDerivedStateFromProps so that a user can't enter any string except an empty one.

Changelog

New

• test for updating value to empty string when allowEmpty is true
• isInputInvalid logic

Changed

• proptype for value and defaultValue

Removed

• {{removed thing}}

Testing / Reviewing

Verify that the Number Input works as expected and that it resolves the issues from #4294, #4997, #4996. Mainly check that if allowEmpty is true, the error doesn't show up for the empty state and verify that aria-invalid and data-invalid correspond to when a number is invalid.

[netlify]

Deploy preview for the-carbon-components ready!

Built with commit bddf497

https://deploy-preview-5217--the-carbon-components.netlify.com

[netlify]

Deploy preview for carbon-elements ready!

Built with commit 632a0c2

https://deploy-preview-5217--carbon-elements.netlify.com

[netlify]

Deploy preview for carbon-components-react failed.

Built with commit 632a0c2

https://app.netlify.com/sites/carbon-components-react/deploys/5e3992046ac43f00072f542f

[tw15egan]

A triple whammy, nice work! Tested a few scenarios and they all work as expected 👍 ✅

[asudoh]

@abbeyhrt Thank you for jumping in! Let me take some time to review this given it seems change in some key logic in the component. Don't hesitate to ping me if you don't hear back in a reasonable amount of time.

[asudoh]

Put a few comments, please don't hesitate to ping me if you have any questions. Thank you again for jumping in @abbeyhrt!

[asudoh]

Suggested change

	if (typeof value === 'string' && value === '' && state.value !== '') {
	if (!useControlledStateWithValue && value === '' && prevValue !== '') {

• Returning non-null value, which means changing the state to the returning value, whenever value prop is an empty string and value state is not an empty string causes canceling any state update (to non-empty string, e.g. upon up/down buttons or user's type) if value prop is an empty string. The problem is observed with <NumberInput value="" /> where it doesn't allow user to make any edit at all. Wondering if you simply wanted to detect update in value prop to an empty string, which led to my suggestion above. Note that gDSFP is called for state update requests in addition to prop updates.
• useControlledStateWithValue flag must make the entire gDSFP no-op (by returning null). The purpose of flag useControlledStateWithValue is not doing any value state update from value prop
• typeof value === 'string' is redundant if we are doing strict equal check of value with an empty string (given strict equal check involves type checking)

[asudoh]

@abbeyhrt Any thoughts on this...? Thanks!

[abbeyhrt]

I'll make the changes for the last two points, those seem good to me 👍 Could you help me understand your first point? The intent behind it was to prevent anybody from setting the value to anything but an empty string or a number, could you provide steps for me to reproduce the problem if value is set to an empty string?

[asudoh]

Thanks @abbeyhrt for all the updates!