[grid-pro] date-time-picker misbehaves in small viewports

[DiegoCardoso]

Description

Using vaadin-date-time-picker as the custom editor of a vaadin-grid-pro column doesn't behave as expected when the user is interacting with the element in a small viewport size device, such as a phone. Although the changes in #9670 and #9671 slightly improved its usability, there are still a couple of issues that would need to be addressed:

• The element closes unexpectedly when the date part of the picker is opened a second time
  • It might be a problem with how the _shouldRemoveFocus is working the second time
• There's no clear way to determine when the element should be removed
  • As, by default, the grid pro removes the editor on focusout (unless the focus moves to the overlay belonging to that field), it is not clear the right time for the case of vaadin-date-time-picker: the user should be able to move focus back and forth between the date and time pickers

grid-pro-dtp.mp4

Expected outcome

Using the vaadin-date-time-picker as a custom editor should allow opening the date picker overlay multiple times in small viewports.

Minimal reproducible example

Change the grid-pro.html dev page to add the following column:

      <vaadin-grid-pro-edit-column path="appointment"></vaadin-grid-pro-edit-column>

and add this to the JS:

      import '@vaadin/date-time-picker';

      const DATE = new Date();
      DATE.setHours(11);
      DATE.setMinutes(0);

      const grid = document.querySelector('vaadin-grid-pro');
      grid.items = users.map((user) => {
        DATE.setHours(DATE.getHours() + 1);
        DATE.setDate(DATE.getDate() + 1);
        user.appointment = DATE.toISOString().substring(0, 16);
        return user;
      });

      const datetime = document.querySelector('[path="appointment"]');
      datetime.editModeRenderer = (root, _, { item }) => {
        const element = document.createElement('vaadin-date-time-picker');
        element.value = item.appointment;
        root.appendChild(element);
      };

Steps to reproduce

1. Open http://localhost:8000/dev/grid-pro.html
2. Enable the device toolbar
3. Shrink the viewport size so that the date picker overlay opens in full-screen mode
4. Double-click the cell containing the vaadin-date-time-picker and close the date picker overlay with the cancel button
5. Open the date picker overlay once again

For the second issue, in (5), instead of opening the date picker, open the time picker and choose a time. The editor will remain open.

Environment

Vaadin version(s): V24.7+

Browsers

No response