-
Notifications
You must be signed in to change notification settings - Fork 13.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: need a way of knowing when swipe to go back is aborted #28929
Comments
Thanks for the report. Does using |
Hey @liamdebeasi, unfortunately as stated in the description, this is not possible. It technically works but creates a situation for us where the user can momentarily see & interact with elements that need to be gone by the time the animation is started, but need to be restored when he gesture is aborted. We use Angular content portals to project content dynamically and it needs to be in the right place at the right time. |
Do you have an example of the elements that you need removed in your application? |
Huh, weird timing! I was also just experiencing trouble with the lack of published events for this scenario. Below is my use case:
If it helps, I would be happy to create a reproduction. But essentially, there are no Ionic events published to detect the situation where a swipe back does not fully complete. Kapture.2024-02-04.at.14.49.52.mp4 |
… pages Note: This has a problem documented below ionic-team/ionic-framework#28929
@aeharding Yes! This is almost exactly our scenario. Thanks for posting! Love the timing :D |
Would an IntersectionObserver work for the video use case? Unless the video sticks to the top of the screen as you scroll, I imagine you would want to pause the video when the video scrolls out of the viewport as well. Using IntersectionObserver would let you cover both cases. |
I already use Intersection Observer for your mentioned case of play/pause while scrolling feed, but it is not well suited for detecting page navigations in my testing.
There's a few other DevEx reasons (there is a lot of extra code, and I need to use 2x the intersection observers due to reverse portals), but they're not blockers like the above. Side note, on https://ionicframework.com/docs/angular/lifecycle it says,
But, I don't think this is a good advice due to the original issue. If you were to cleanup observables on |
Do you have an example of this issue that I can look at? Native iOS doesn't have a standard way of detecting when a swipe gesture is cancelled, so it's possible there's another approach here that would solve the problem. |
I can get you a repro example if it would help, but it may take a bit to set up. :)
This is interesting that you mentioned, so I decided to look and see what native iOS does. It turns out that native iOS re-triggers lifecycle events when you do not complete a swipe back. Please see the following Youtube video (linking to around 9:30): https://youtu.be/wLS26PfQeAs?si=ZBBQ_irI444i24gm&t=562 As you can see, when he lifts his finger (and swipe back does not complete), the following lifecycle events in yellow are triggered. This is different than Ionic, which does not trigger any lifecycle events when you cancel the swipe back. |
Ah that's interesting. If the will/did events fired when cancelling the swipe gesture would that make it easier to implement the pattern you described above? |
I can't speak for @lincolnthree, but firing those extra will/did events would fully address my edge case! |
Yes 100%. Though it would be a potentially breaking change for many apps rather than a new feature. You'd have to review all of your existing event handlers and make sure nothing bad happens if they are called multiple times. That's why I opted to suggest the introduction of a new API rather than overload the existing one, but I can see it going both ways if you want to keep things minimal. It just means apps will break. Additionally, while it would solve this specific case, there is some nuance to using separate events. E.g. the nature of the event is unknown if you call the same event handlers. You could do some complex state checking I guess, to determine what situation the |
Thanks! There's some research we need to do as to what the best way of implementing this is. At the very least, the uses cases described here should be achievable within Ionic Framework so we should try and find a resolution. |
Awesome! Glad we could help, and looking forward to doing even more fancy things with Ionic :D Do you know of any "secret" hooks / hacks we could tie into in the mean time? Anything we could overload or override? |
Note: This has a problem documented below ionic-team/ionic-framework#28929 Also implemented mute/unmute as well as playing paused videos (or autoplay disabled) Player needs further optimization
We do have a private
Your mileage may vary here, but that might be a possible workaround for now. |
Wondering if any decisions have been made on this? We're still trying to figure out if we should wait, or try to hack in a workaround. Thanks! |
Same here. Would be really helpful to have ionViewDidLeave and ionViewDidEnter triggered for the corresponding pages, when the swipe action is aborted, to have a consistent state in the end. |
For now we can solve our issues with the help of the swipeHandler. Thank you for the hint @liamdebeasi |
Prerequisites
Describe the Feature Request
Currently we have four primary `ionView[Did/Will][Enter/Leave] events to observe during navigation & animation. However, there are scenarios where these events may be fired, but the user cancels the action and stays on the current screen. There does not seem to be a way to detect this scenario, unless I am missing something.
Existing events: https://ionicframework.com/docs/angular/lifecycle
I would like to be able to observe
ionViewDidNotEnter
andionViewDidNotLeave
events (or something to that effect), so that we can understand when users started to leave the page, but did not.Describe the Use Case
On iOS, as an example, a user swipes right to go back to the previous page, then decides to stay on the page they're looking at. However,
ionViewWillLeave
has been called, and the current page has taken some action that needs to be rolled back when the animation finishes. For the sake of this use case, it is not possible to use theionViewDidLeave
event for what the page needs to do.Unless I've missed a feature or event to observe, we need supplemental events to know when this situation occurs.
Describe Preferred Solution
Publish
ionViewDidNotEnter
andionViewDidNotLeave
events to supplement the existing ones we already have.Describe Alternatives
Not sure.
Related Code
No response
Additional Information
No response
The text was updated successfully, but these errors were encountered: