You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have searched for existing issues that already report this problem, without success.
Ionic Framework Version
v8.x
Current Behavior
When IonDatetime is used within an IonModal, the backdrop that is supposed to accompany the date/time selector doesn't appear.
Expected Behavior
When IonDatetime is used within an IonModal, the backdrop as appears here in the docs appears correctly.
Steps to Reproduce
Create basic Ionic app
Create an IonModal
Inside that IonModal, place an IonDatetimeButton component
Within the element as the base IonModal, place the Basic Usage code provided here: https://ionicframework.com/docs/api/datetime-button
I feel like there needs to be some way for a modal associated with a datetime modal to have a higer z-index so the backdrop appears correctly. I tried supplying my own IonBackdrop but couldn't get that to work. I can manually edit the :host pseudo selector in the dev tools and increase the z-index to a value that works (11 vs. 2).
The text was updated successfully, but these errors were encountered:
The popover does technically work but is an unsatisfactory user experience. I much prefer the larger tap space and centeredness of the modal style vs the popover.
Prerequisites
Ionic Framework Version
v8.x
Current Behavior
When IonDatetime is used within an IonModal, the backdrop that is supposed to accompany the date/time selector doesn't appear.
Expected Behavior
When IonDatetime is used within an IonModal, the backdrop as appears here in the docs appears correctly.
Steps to Reproduce
Create basic Ionic app
Create an IonModal
Inside that IonModal, place an IonDatetimeButton component
Within the element as the base IonModal, place the Basic Usage code provided here: https://ionicframework.com/docs/api/datetime-button
Code Reproduction URL
https://stackblitz.com/edit/jcadpz?file=src%2Fmain.tsx
Ionic Info
Ionic:
Ionic CLI : 7.2.0 (/Users//.npm-packages/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 8.1.2
Capacitor:
Capacitor CLI : 6.0.0
@capacitor/android : not installed
@capacitor/core : 6.0.0
@capacitor/ios : not installed
Utility:
cordova-res : not installed globally
native-run : 2.0.1
System:
NodeJS : v20.11.0 (/usr/local/bin/node)
npm : 10.2.4
OS : macOS Unknown
Additional Information
I feel like there needs to be some way for a modal associated with a datetime modal to have a higer z-index so the backdrop appears correctly. I tried supplying my own IonBackdrop but couldn't get that to work. I can manually edit the
:host
pseudo selector in the dev tools and increase thez-index
to a value that works (11 vs. 2).The text was updated successfully, but these errors were encountered: