setValue doesn't trigger validation for some TB field elements

[vursen]

Description

Currently, Field TestBench elements trigger blur and change on the component's host rather than the input when setting a value with setValue(), which results in validation not running.

flow-components/vaadin-text-field-flow-parent/vaadin-text-field-testbench/src/main/java/com/vaadin/flow/component/textfield/testbench/TextFieldElement.java

Lines 35 to 40 in 39b52fd

	@Override
	public void setValue(String string) {
	HasStringValueProperty.super.setValue(string);
	dispatchEvent("change", Collections.singletonMap("bubbles", true));
	dispatchEvent("blur");
	}

This is apparently an omission from the a11y slotted refactoring.

Affected components

• TextFieldElement
• TextAreaElement
• EmailFieldElement
• IntegerFieldElement
• NumberFieldElement
• PasswordFieldElement
• BigDecimalFieldElement

Expected outcome

setValue() of Field TextBench elements should trigger blur and change on the input rather than the host after a new value is set.

Note, if change and blur are triggered on the input, then setValue() should also trigger an input event before the change event as otherwise the input's value won't be synced with the field's value property.

Environment

Vaadin version(s): 21, 22, 23
OS: Mac OS

Browsers

No response

[vursen]

I wonder if it might be more suitable to have a separate method setInputValue specifically for emulating setting an input value (that would trigger blur, change, and so on) while the existing setValue method would only set the value property on the component without triggering any DOM events.

It is currently confusing that setValue in some TB elements (e.g. DatePickerElement) only sets the value property while in others (e.g. TextFieldElement) also triggers some events.

This ticket is probably a good time to decide whether we want to align that or keep these methods working the old way.

flow-components/vaadin-date-picker-flow-parent/vaadin-date-picker-testbench/src/main/java/com/vaadin/flow/component/datepicker/testbench/DatePickerElement.java

Lines 130 to 140 in 39b52fd

	/**
	* Sets the selected date as a string.
	* <p>
	* The value is always in format <code>YYYY-MM-DD</code>.
	*
	* @param value
	* the value to set
	*/
	protected void setValue(String value) {
	setProperty("value", value);
	}

flow-components/vaadin-date-picker-flow-parent/vaadin-date-picker-testbench/src/main/java/com/vaadin/flow/component/datepicker/testbench/DatePickerElement.java

Lines 154 to 163 in 39b52fd

	/**
	* Opens the overlay, sets the value to the inner input element as a string
	* and closes the overlay. This simulates the user typing into the input and
	* triggering an update of the value property.
	*/
	public void setInputValue(String value) {
	this.open();
	setProperty("_inputValue", value);
	this.close();
	}

UPD: If we trigger change and blur on the input as proposed above, then, in order for the input's value to get synced with the field's value property, we also have to trigger an input event before the change event.

[yuriy-fix]

We would probably want to modify setValue to not trigger events (i.e. blur)

[vursen]

The alternative way could be to ensure every field component provides a sendKeys method for emulating user input.

It should be said though that using sendKeys can be a bit inconvenient and clunky in the situation when you need to replace the whole value at once which is often the case in tests. The way you would currently do that: select the input value (either with a key shortcut or a JavaScript API), press Backspace and only then you can type a new value. So, at least, it might be useful to have a shorthand method for that purpose to avoid repetition.

public void sendKeys(CharSequence... keysToSend) {
  $("input").first().sendKeys(keysToSend);
}

public void sendKeysClearAll() {
  sendKeys(Keys.SHIFT, Keys.HOME, Keys.BACK_SPACE);
  // or
  // sendKeys(Keys.META, "A", Keys.BACK_SPACE);
}

[vursen]

The sendKeys API doesn't suit all the cases.

Example: an input has a maxlength, so you can't enter more than the specified number of characters to it with the keyboard. However, you might still want to set the value to something longer in order to test validation. This is when setInputValue would come in useful.

[vursen]

On closer inspection, it turns out that setValue in its default implementation is actually useless at least for components in the text-field package. The reason is ValueChangeMode.ON_CHANGE which is enabled for the components by default so just updating the value property on the client-side doesn't cause it to sync on the server-side unless a change event is fired on the component. But if we trigger that change event, we end up with two methods doing pretty much the same.

So, it seems that the only reasonable option that remains would be to fix setValue to make it set value on the input element and trigger the respective events.