[Input] Unable to limit length

[mmatejic]

Issue Type

Bug Report

Component or Pattern Affected

Input

Expected Behavior

If value is conditionally trimmed/sliced in my onChage function, input should keep that value.

Current Behavior

Looks like the problem is in keeping value in Input's state itself. On value change, It triggers componentDidUpdate twice: first time for prop change, and second time for setState in its onChange func. In second update, prevProps.value and props.value are always equal, therefore input continues to update its value.

Possible Solution

Addition of maxLength prop could solve this, or changing whole logic of updating its value

Steps to Reproduce (for bugs)

1. Set prop value to value in component's state
2. On change, do not update state with new one
3. Value will continue to change

• Even hardcoding value will only work initially. Afterwards it will have whatever user is typing

onChange = (e) => {
const { value, name } = e.target;

if (value.length > 10) {
e.preventDefault();
}
else {
this.setState({ [name]: value });
}
};

render() {
return < Input name="fieldName" value={this.state.value} onChange={this.onChange} />
}

Context

I'm trying to prevent user from entering x number of characters.

Your Environment

• Library: React
• Version used: 23.21.5
• Browser Name and version: Safari 14.0.3
• Operating System and version: macOS 11.2.3
• Link to your project: N/A