bug: datetime shows previous month after closing time popover

[TimGels]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

I find this issue a bit difficult to describe, as I don't know what some parts of the date-time element are called. But I will embed a video.

When selecting a time using the date-time element, the calendar will be shown in an incorrect state. Or at least, it seems like it tries to show May instead of the current (by the time of this issue) June.

Before selecting a time:

After selecting a time:

Expected Behavior

After selecting a time, I do not expect the day to get changed (when a day is selected). When no day is selected, I expect it to select a default date or today's date after selecting a time, or at the very least not a "jumping" calendar.

It does seem to work when selecting a day from another month before selecting a time.

2022-06-09.10-36-06.mp4

Steps to Reproduce

1. Select a time
2. Dismiss the popover time scroll wheel by clicking the backdrop
3. The calendar will show incorrectly

2022-06-09.10-10-13.mp4

---

1. Select a day in the same month that is open
2. Select a time
3. Dismiss the popover time scroll wheel by clicking the backdrop
4. The calendar will be shown incorrectly

2022-06-09.10-10-57.mp4

Code Reproduction URL

https://github.com/TimGels/ionic-date-time-repro

Ionic Info

[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package'

       Require stack:
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic
[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package'

       Require stack:
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
PS C:\Users\user\projects\ionic-date-time-repro\ionic-date-time-repro> ionic info
[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package'

       Require stack:
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic
[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package'

       Require stack:
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic

Ionic:

   Ionic CLI                     : 6.18.2 (C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 6.1.9
   @angular-devkit/build-angular : 14.0.1
   @angular-devkit/schematics    : 14.0.1
   @angular/cli                  : 14.0.1
   @ionic/angular-toolkit        : 6.1.0

Capacitor:

   Capacitor CLI      : 3.5.1
   @capacitor/android : not installed
   @capacitor/core    : 3.5.1
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 1.6.0

System:

   NodeJS : v16.14.0 (C:\Program Files\nodejs\node.exe)
   npm    : 8.3.1
   OS     : Windows 10

Additional Information

N/A

[TimGels]

It looks to me that this issue is not present in the time-date presentation.

2022-06-09.11-00-34.mp4

[liamdebeasi]

Thanks for the issue. What browser are you testing this on?

[TimGels]

I am testing this on Firefox v101.0. I have also reproduced the issue on Chrome v102.0.5005.63

[liamdebeasi]

Thanks, I can reproduce this. When overlays in Ionic dismiss, we automatically bring focus back to the previously focused element: https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/overlays.ts#L448 If we did not do this, the focus gets set to the body and keyboard users will need to re-tab back to where they were before opening the overlay.

The time picker is presented in a popover, one of the overlay types in Ionic. When the popover dismisses, we grab the first focusable element inside of ion-datetime and focus it. In this case, we are focusing the first button in the previous month. In Chrome and Firefox, focusing an out of view element causes the element to scroll into view. This results in the behavior reported here.

---

This function should never grab the first button because the calendar grid container is focusable: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/datetime/datetime.tsx#L1497 (This is how we capture focus so users can use the arrow keys to navigate in the calendar grid). The query selector we use in focusPreviousElementOnDismiss never considers .ion-focused. It probably should as the other query selector we use considers .ion-focused. (We should also consider just merging these two variables).

edit: This bug only happens when there is no value set.