Conversation
…class on initial entry
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
2 tasks
3 tasks
2 tasks
pull Bot
pushed a commit
to LoadsAForks/ionic-framework
that referenced
this pull request
Aug 7, 2026
…-team#31335) Issue number: resolves ionic-team#31155, resolves ionic-team#31143 --------- ## What is the current behavior? Currently, an `ion-datetime` inside a modal or popover shows the wrong month once the overlay is reopened. The selected day isn't visible, the previous month button does nothing, and picking a day from the grid lands on an unrelated date. Overlays move their host element into `ion-app` when presenting and back to its original position when dismissing, which disconnects and reconnects the datetime. `disconnectedCallback` reset `hasBeenIntersecting` during that move, so by the time the hidden-state `IntersectionObserver` entry arrived, `hiddenCallback` mistook the dismissal for the synthetic initial entry and returned early. That left `datetime-ready` on the host, so on the next present `markReady` saw the class and returned without re-centering the calendar on the working month, and the browser had already reset `scrollLeft` to 0 while the overlay was hidden. `scrollLeft: 0` renders the previous month's grid while the header still names the working month, which is what produces all three symptoms. ## What is the new behavior? With this change, `disconnectedCallback` no longer resets `hasBeenIntersecting`. That flag tracks the observers, and the observers are only created in `componentDidLoad` and never re-created on reconnect, so a DOM move has no business clearing it. `hiddenCallback` now sees the real hidden transition on dismiss and tears down as it did before ionic-team#31108, which lets `markReady` run again on the next present and re-center the calendar. ## Does this introduce a breaking change? - [ ] Yes - [X] No ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> This regression was introduced in ionic-team#31108. That PR needed the flag to make `hiddenCallback` ignore the synthetic initial entry, but the `disconnectedCallback` reset it also added had no job and broke the overlay case. Before ionic-team#31108, `hiddenCallback` had no guard at all and always removed `datetime-ready` on dismiss, so this restores the behavior that shipped for all of v8.. - [Relevant test screen - iOS](https://ionic-framework-git-fix-31155-ionic1.vercel.app/src/components/datetime-button/test/overlays?ionic:mode=ios) - [Relevant test screen - MD](https://ionic-framework-git-fix-31155-ionic1.vercel.app/src/components/datetime-button/test/overlays?ionic:mode=md) To reproduce: open the "Modal - Default" picker, dismiss it, then open it again. On `main` the grid shows February while the header reads March 2022. --------- Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issue number: internal
What is the current behavior?
ion-datetimeruns two IntersectionObservers: one to detect when the host becomes visible (which addsdatetime-ready) and one to detect when it becomes hidden (which removes the class and tears down listeners). When the host mounts offscreen, both observers receive an initial "not intersecting" entry onobserve(). The hidden-state observer treats that initial entry as a real visible-to-hidden transition, queues awriteTaskto removedatetime-ready, and races the layout-based fallback (ensureReadyIfVisible) that adds the class after 100ms. On WebKit the remove wins often enough that the e2e test for the fallback (added in #30793 to fix #30706) had to be skipped on Mobile Safari. Anything in production that addsdatetime-readyoutside of a realisIntersecting: trueevent is exposed to the same race.What is the new behavior?
A
hasBeenIntersectingflag is set true only whenvisibleCallbackobservesisIntersecting: true. The hidden-state observer's teardown is gated on this flag, so the synthetic initial "not intersecting" entry is ignored. The flag is reset when the host actually transitions to hidden and ondisconnectedCallback. The previously duplicated init-listeners + ready-class block is consolidated into a singlemarkReadyhelper. The WebKit skip on the IO-fallback e2e test has been removed.Does this introduce a breaking change?
Other information
The asymmetry where
ensureReadyIfVisible(the layout fallback) deliberately does NOT sethasBeenIntersectingis load-bearing: the flag must reflect a real observer signal, not a fallback-driven write, otherwise the bug returns. This is called out at the guard site so future cleanups don't undo it.This test was most likely to fail in docker testing Linux Webkit with
--repeat-each=20because it was pretty flaky. I was able to force it to fail under these conditions and, after fixing it, it no longer failed.Relevant Preview Link: