Inconsistent required error behavior on Flow vs web component fields #8231
Description
Description
If I have a required field (TextField, ComboBox, etc.), required validation occurs differently in the Flow component and the web component. If I tab into the field and tab out without making any changes, the error message shows on the web component, but not on the Flow component.
Expected outcome
I would expect the behavior to be consistent, regardless of how the component is created.
Minimal reproducible example
Example Flow component initialization:
ComboBox<String> combo = new ComboBox<>("Required combobox");
combo.setItems("Bar", "Foo", "Baz");
combo.setRequired(true);
combo.setI18n(new ComboBoxI18n()
.setRequiredErrorMessage("Field is required"));
add(combo);
Example web component initialization:
<!DOCTYPE html>
<html lang="en">
<head>
<script dev type="module" src="demo.js"></script>
</head>
<body>
<vaadin-combo-box id="combo"
label="Required combobox"
error-message="Field is required"
required
></vaadin-combo-box>
</body>
</html>demo.js:
import '@vaadin/combo-box';
window.addEventListener('WebComponentsReady', () => {
const combo = document.getElementById("combo");
combo.items = ['Foo', 'Bar', 'Baz'];
}Steps to reproduce
- Tab in ComboBox
- Tab out
- Observe whether the ComboBox displays the error message or not
Environment
Vaadin version(s): 24.9.3
OS: n/a
Browsers
Issue is not browser related