Skip to content

bug: Re-opening the IonDatetime calendar which uses a react state variable in isDateEnabled check disables all dates. #31151

@AnastasiaAtTerrestrialOrigin

Description

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

IonDatetime that has an isDateEnabled check that uses react state disables all dates when you close and reopen the calendar. This seems to have started with Ionic version 8.8.6. The temp workaround is to roll back to Ionic 8.8.5 or earlier.

For some reason this happens when you're using a react state variable in the isDateEnabled check. If you are just doing something on the fly like checking if the date is odd or even instead of comparing it against a state var, it seems to work ok.

See example: https://github.com/AnastasiaAtTerrestrialOrigin/IonicCalendarBugReproduction

Expected Behavior

No matter how many times you open the IonDatetime calendar, it should show the dates as enabled if isDateEnabled check passes.

Steps to Reproduce

If you are not using the example in the repo:

Make sure the Ionic library is set to 8.8.6 - 8.8.7.
Delete node_modules and do npm install again to make sure you have the right library.

Repo example: https://github.com/AnastasiaAtTerrestrialOrigin/IonicCalendarBugReproduction

Set the dates in the state to something in the current month (Depending on when you're looking at this ticket).
Click on the date to bring up the calendar. This will show the calendar with the given dates disabled, but the rest enabled.
Select a date or just click off the calendar to close it. Click the date button again to re-open the calendar. All the dates will be disabled. This seems to be an issue with ionic 8.8.6+. Workaround is to roll back to 8.8.5 until the fix is in place.

Code Reproduction URL

https://github.com/AnastasiaAtTerrestrialOrigin/IonicCalendarBugReproduction

Ionic Info

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

   Require stack:
   - /home/user/.npm-global/lib/node_modules/@ionic/cli/lib/project/index.js
   - /home/user/.npm-global/lib/node_modules/@ionic/cli/lib/index.js
   - /home/user/.npm-global/lib/node_modules/@ionic/cli/index.js
   - /home/user/.npm-global/lib/node_modules/@ionic/cli/bin/ionic

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

   Require stack:
   - /home/user/.npm-global/lib/node_modules/@ionic/cli/lib/project/index.js
   - /home/user/.npm-global/lib/node_modules/@ionic/cli/lib/index.js
   - /home/user/.npm-global/lib/node_modules/@ionic/cli/index.js
   - /home/user/.npm-global/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

Ionic CLI : 7.2.1 (/home/user/.npm-global/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 8.8.7

Capacitor:

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

Utility:

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

System:

NodeJS : v22.22.0 (/usr/bin/node-22)
npm : 11.11.1
OS : Linux 6.18

Additional Information

This seems to happen only when using a react state variable to do the date check.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions