[InputGroup] Displayed value does not match value of 'value' prop

[tbertrand7]

Environment

• Package version(s): @blueprintjs/core: 3.34.0
• Operating System: Mac
• Browser name and version: Chrome latest

Steps to reproduce

My onChange function is designed to limit the entered characters to only 10 numbers:

<InputGroup
    disabled={disabled}
    leftIcon={leftIcon}
    placeholder={placeholder}
    rightElement={rightElement}
    type={type}
    name={name}
    id={id}
    onChange={(e) => {
        e.target.value = e.target.value.replace(/[^0-9]/g, '').substr(0, 10);
        onChange(e);
    }}
    onBlur={onBlur}
    value={value}
/>

Actual behavior

Any non-number characters and characters after length 10 are properly not stored in 'value' but still display in the input field.

Expected behavior

The displayed text in the input field should match the value of the 'value' prop. This works in @blueprintjs/core 3.33.0.

[adidahiya]

I made some changes to the input value state logic in v3.34.0 in order to work around issues like #4298, which may have caused this issue to occur.

However:

    onChange={onChange={(e) => {
        e.target.value = e.target.value.replace(/[^0-9]/g, '').substr(0, 10);
        onChange(e);
    }}

Editing the DOM directly like that is not a good pattern in React, especially if you're also setting the value prop on the component. This is not well-designed behavior as part of the InputGroup API. Instead of touching the DOM directly, you should apply the substring logic to update your local value state in onChange, and send that new value to the value={} prop.

[tbertrand7]

Right. The reason why I wrote the onChange function that way was because I am passing formik.handleChange as the onChange prop in the parent component.

However, this issue still persists if I write the code in the following way:

onChange={(e) => {
    onChange(e.target.value.replace(/[^0-9]/g, '').substr(0, 10));
}}

Parent:

onChange={(val) => formik.setFieldValue('phone', val)}

[adidahiya]

Is it possible to demonstrate the problem using a code sandbox (linked in the issue template)?

[tbertrand7]

Sure Thing. The incorrect behavior actually exists just using a useState hook. I should not be able to enter non-number characters, or more than 10 numbers. The value state variable follows the correct behavior, but the input does not.

Sandbox

Note that if you change the @blueprintjs/core version in package.json to 3.33.0 the desired behavior is achieved.