Programmatic blur should always commit user input and close overlay

[vursen]

Description

Currently, overlay-based field components, such as DatePicker, TimePicker, ComboBox, behave differently on programmatic blur when their overlay is open.

Scenario 1

1. Open the overlay
2. Enter text input
3. Blur programmatically

Component	Closes overlay	Commits user input
DatePicker	❌	❌
TimePicker	✅	✅
ComboBox	✅	✅

Scenario

1. Open the overlay
2. Enter text input
3. Click inside the input element (causes the reset of the keyboardActive state)
4. Blur programmatically

Component	Closes overlay	Commits user input
DatePicker	❌	❌
TimePicker	❌	❌
ComboBox	❌	❌

Expected outcome

All these component should commit user input and close the overlay on programmatic blur in both scenarios.

Minimal reproducible example

<vaadin-date-picker label="DatePicker"></vaadin-date-picker>
<vaadin-time-picker label="TimePicker"></vaadin-time-picker>
<vaadin-combo-box label="ComboBox"></vaadin-combo-box>

<script type="module">
  import '@vaadin/date-picker';
  import '@vaadin/time-picker';
  import '@vaadin/combo-box';

  const datePicker = document.querySelector('vaadin-date-picker');
  datePicker.addEventListener('change', (event) => {
    console.log('DatePicker change', event.target.value);
  });

  const timePicker = document.querySelector('vaadin-time-picker');
  timePicker.addEventListener('change', (event) => {
    console.log('TimePicker change', event.target.value);
  });

  const comboBox = document.querySelector('vaadin-combo-box');
  comboBox.items = ['Item 1', 'Item 2'];
  comboBox.addEventListener('change', (event) => {
    console.log('ComboBox change', event.target.value);
  });

  setTimeout(() => {
    datePicker.blur();
    timePicker.blur();
    comboBox.blur();
  }, 6000);
</script>

Environment

Vaadin version(s): 24.4 and earlier
OS: Mac OS

Browsers

No response