Programmatic blur should always commit user input and close overlay

[vursen]

Description

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 2

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