Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
tbertrand7 opened this issue Oct 19, 2020 · 4 comments · Fixed by #4383
Closed

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

tbertrand7 opened this issue Oct 19, 2020 · 4 comments · Fixed by #4383

Comments

@tbertrand7
Copy link
Contributor

tbertrand7 commented Oct 19, 2020

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
Copy link
Contributor

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
Copy link
Contributor Author

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
Copy link
Contributor

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

@tbertrand7
Copy link
Contributor Author

tbertrand7 commented Oct 20, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants