TextField visual value error when pasting text and maxLength is set

[kalmancsaba]

Description

Take a TextField with maxLength set, then type into it until you reach max length. Copy some text to clipboard then paste it into the TextField. Seemingly nothing happens, because max length is already reached. But if the value is set to empty from server side, the value is really set to empty in the server side TextField object and the client side vaadin-text-field, but the previous value is not cleared visusally.

Inspecting the vaadin-text-field with browser dev tools, the element's value property returns empty, but focusElement.value property returns the previous value. It seems the input element inside vaadin-text-field somehow retains the old value.

If the server side sets some non-empty value, everything works correctly.

TextArea also has this error.

I'm not sure if it's a vaadin-text-field-flow or a vaadin-text-field issue.

Tested browsers

Affected: Chrome (78.0.3904.108), Edge (44.18362.267.0)

Unaffected: Firefox (71.0)

Vaadin version

Reproducible with 14.0.15 and 14.1.1

Code to reproduce

@Route(value = "TextFieldWithMaxLength")
public class TextFieldWithMaxLength extends Composite<HorizontalLayout> {

	public TextFieldWithMaxLength() {
		TextField field = new TextField("Type here");
		field.setMaxLength(5);
		field.addValueChangeListener(evt -> Notification.show("Changed. Text: " + evt.getValue(), 3000, Position.TOP_START));
		Button clearButton = new Button("Clear", evt -> {
			field.setValue("");
		});
		Button showButton = new Button("Show", evt -> {
			Notification.show("Text: " + field.getValue(), 3000, Position.TOP_START);
		});

		getContent().setPadding(true);
		getContent().setDefaultVerticalComponentAlignment(Alignment.END);
		getContent().add(field, showButton, clearButton);
	}
}

Steps to reproduce the error with above code:

1. Type into the textfield until you reach max length
2. When the textfield accepts no more characters, paste some text into the field (nothing happens, as it should)
3. Click out of the field so the value travels to the server.
4. Click the "Clear" button.
   At this point the ValueChangeListener shows the notification with the new empty value, but the original value is still present in the field.