[date-time-picker] Moving focus between the child pickers with the mouse results in early validation

[vursen]

Description

Focusing a child picker with the mouse and subsequently focusing the opposite picker results in early validation, even though you are still interacting with the field.

I'd like to emphasize that using the mouse is key to reproducing the issue: early validation doesn't happen if you are moving focus inside the field with the keyboard.

Screen.Recording.2023-02-06.at.12.26.34.mov

Expected outcome

Regardless of the device you use to move focus (the keyboard or the mouse), there shouldn't be early validation. Otherwise, it may give you a wrong impression as if you've selected something wrong whereas it was simply a required check that failed because the field didn't have a value yet.

Minimal reproducible example

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

<vaadin-date-time-picker required></vaadin-date-time-picker>

Steps to reproduce

1. Add the above example to an HTML page
2. Click on the child date-picker
3. Click on the child time-picker (will close the date-picker)

Environment

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

Browsers

Issue is not browser related

Additional context

Related to vaadin/platform#3066