ionic-team / ionic-team/ionic-framework

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

Đang mở
#31,151 0 bình luận 0 reaction 0 người được giao Xem trên GitHub
triage
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### 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.

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Start by running the linked IonicCalendarBugReproduction project with @ionic/react 8.8.7 and compare its behavior with 8.8.5. Trace the IonDatetime isDateEnabled handling when the calendar is closed and reopened. Done means dates that pass the state-based check remain enabled after repeated reopenings, with the reproduction behavior covered by a regression test.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
react, typescript
Lĩnh vực
frontend
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Ít trao đổi
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
52/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.