Date picker dropdown stays open on Android

[tomivirkki]

Description

When you have an Android touch device wide enough not to enter the fullscreen mode, <vaadin-date-picker>'s dropdown stays open if you use the virtual keyboard's controls to focus the next input on the page.

https://github.com/user-attachments/assets/fc900f02-1cd3-4a09-b576-65dcae426f19

Expected outcome

The date-picker's dropdown should close when you focus the next input

Minimal reproducible example

<vaadin-date-picker></vaadin-date-picker>

<input />

Steps to reproduce

1. Open the date picker's dropdown
2. Use the virtual keyboard's controls to focus the next input on the page

Environment

Vaadin version(s): 24.4 OS: Android

Browsers

Chrome

[tomivirkki]

The issue can be produced on a desktop environment by programmatically focusing an input outside the date picker:

<vaadin-date-picker label="Start date"></vaadin-date-picker>

<input id="next-input" />

<script>
  const datePicker = document.querySelector('vaadin-date-picker');
  datePicker.addEventListener('opened-changed', (event) => {
    if (event.detail.value) {
      setTimeout(() => {
        document.querySelector('#next-input').focus();
      }, 1000);
    }
  });
</script>

https://github.com/user-attachments/assets/762c38da-4f0e-4a63-94fe-39a18fa0b7e6

[web-padawan]

Note: this also applies to vaadin-combo-box and related components since the recent change in https://github.com/vaadin/web-components/pull/7561.

BTW, the overlay also remains open after moving focus to e.g. browser address bar (which causes input blur).