bug: ios, next and prev buttons do not work when calendar grid is only partially visible

[thomasmassmann]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• #27916

Ionic Framework Version

v6.x, v7.x

Current Behavior

The arrow buttons on ion-datetime do not work on iOS devices (web, simulator, real device) when the calendar grid is only partially visible (less than 3 rows of days).

Bringing the calendar into the viewport (3 rows or more), the arrow buttons work again.

Expected Behavior

The arrow buttons to switch between months work, even when only the arrow buttons are currently in visible to the user.

Steps to Reproduce

1. Open https://docs-demo.ionic.io/component/datetime
2. Open one of the calendar widgets.
3. Ensure the calendar is fully visible.
4. The arrow buttons allow changing the month.
5. Ensure only 2 rows of the calendar days are visible.
6. Try to change the month (more than 2, either direction is fine).
7. With the first click, the month selection stays at the current month, but the days grid slides in the next/previous month).
8. Any additional click on the arrow button has no effect.

Code Reproduction URL

https://github.com/ionic-team/docs-demo

Ionic Info

[WARN] You are not in an Ionic project directory. Project context may be
       missing.

Ionic:

   Ionic CLI : 7.1.1

Utility:

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

System:

   NodeJS : v18.16.0
   npm    : 9.5.1
   OS     : macOS Unknown

Additional Information

No response

[liamdebeasi]

Thanks for the report. The problem here is we get the month that is at the center of the datetime (on both x and y axes):

ionic-framework/core/src/components/datetime/datetime.tsx

Line 892 in 0c117cf

const elementAtCenter = root.elementFromPoint(box.x + box.width / 2, box.y + box.height / 2);

If the center of the datetime is out of view, then this call will return null. It's possible for either only the top or the bottom part of datetime to be visible, so we should account for this.

[liamdebeasi]

Here is a dev build if you are interested in testing the proposed fix:

7.2.2-dev.11690987396.11ef134f

Install Example:

npm install @ionic/[email protected]

[thomasmassmann]

Hi @liamdebeasi , thanks for taking a look at this. I tried the dev version in a real world project and it still shows the same error.

[liamdebeasi]

Can you provide the sample project so I can test? I tested the dev build on the link provided in the original post, and it is now working as expected.

[thomasmassmann]

Here is an example: https://github.com/thomasmassmann/ionicCalendarIssue

It is now working as long as a bit of 1 row with dates is visible. Only having the calendar header visible still results in the error.

My real-world project has the calendar in a modal, and in there in an accordion. That is a different thing to solve now.

[liamdebeasi]

Thanks! Here is a new dev build if you would like to test:

7.2.2-dev.11690996559.1019674a

[thomasmassmann]

Amazing!

[thomasmassmann]

Just to confirm, the latest release now also fixes the issues when an ion-datetime is embedded in an ion-accordion.

[liamdebeasi]

Great! I am going to keep this open until the linked PR is merged.

[liamdebeasi]

Thanks for the issue. This has been resolved via #27917, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.