userEvent.type does not respect maxlength when appending to existing text

[9still]

When 1e8d140 introduced a change to the way .type() behaves, it did not update maxLength handling to take previous text into account.

As a result, if you have an element like this:

<textarea aria-label="input" rows="3" maxlength="10" />

doing the following

const inputField = screen.getByLabelText('input');
await userEvent.type(inputField, '123456');
await userEvent.type(inputField, '123456789101112');
screen.debug();

ends up producing:

<textarea aria-label="input" maxlength="10" rows="3" >
    1234561234567891
</textarea>

rather than what you would expect from the browser, namely:

<textarea aria-label="input" maxlength="10" rows="3" >
    1234561234
</textarea>

[kentcdodds]

Thanks for the report. Would you be interested in fixing that?

[9still]

@kentcdodds sure - took a stab at it. Thanks!

[Gpx]

🎉 This issue has been resolved in version 10.3.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀