bug: Ionic React restores scroll position when navigating forward from /foo/0 to /foo/1

[ibrahimmkara]

Bug Report

Ionic version: [x] 5.x

Current behavior: when the user wants to go to another news on a news detail page, he reaches the news that he clicked on the news link, but because the user's location is at the bottom of the page, he has to go up when he wants to see the news

Expected behavior: I think it should go up automatically every time a link is clicked in the backhend

Steps to reproduce:

Related code:

<> { newsdetails.length===0? <IonLoading isOpen={newsdetails.length===0} deneme={() => this.getNews} message={"Haber yükleniyor"} duration={5000}/> :

{newsdetails.map(newdetail => <div className="content-detail news-detail" key={newdetail.id}> <img alt={newdetail.id} className="imgc boyut image paralax-item" src={https://d.blabla.com/news/${newdetail.image}.jpg}/> <div className="middle-container-10"> <div className="button-bar content-nav"> <Link to="#" className="btn btn-light btn-lg"><IonIcon icon={createOutline}></IonIcon>{newdetail.__comment_count} Yorumla</Link> <Link to="#" className="btn btn-light btn-lg"><IonIcon icon={shareSocial}></IonIcon> Paylaş </Link>

<h1 className="content-title">{newdetail.title} <h2 className="short-content">{newdetail.short_content} <div className="date">{newdetail.date} <div className="text-content boyut" dangerouslySetInnerHTML={{__html: newdetail.content}}> )} } { categorys.length===0 ? <IonLoading isOpen={categorys.length===0} message={"Haber yükleniyor"} duration={5000}/> :

<div className="caption"> <IonIcon icon={documentOutline}/> AYNI KATAGORİDEN HABERLER

<div className="news-set-1 news-set-1-2kx1b">

{categorys.map(category =>
• <Link to={/news/${category.id}}> <div className="r2x1 imgc"> <img alt={category.id} className="image paralax-item" src={https://d.blabla.com/news/${category.image}.jpg}/> <span className="title">{category.title} </Link>
)}

                    </div>
            }
        </>

[liamdebeasi]

Thanks for the issue. Can you provide a repo with the code required to reproduce this issue?

[ibrahimmkara]

https://github.com/Ibrahimkara92/ionic-reactibug-link Although I can not do exactly what I want to tell, I can not transfer it to you for the project-based security, which is the same process immediately.

[liamdebeasi]

Thanks for the follow up. I am unable to reproduce the issue you described using the repo provided. Can you provide some steps to reproduce the issue?

[ibrahimmkara]

How do you tell me what to do i try to do my best

[liamdebeasi]

When running the application you provided, I am unable to see the bug you described. Can you list the steps I need to take to see the bug?

[ibrahimmkara]

I want to explain briefly with an example. If you look at the gif I have posted. I click on a news from the homepage I go to the link without any problems

There are news from the same category on that page, and each news has a link, but it goes to the same detail page, the news I want to open is opened when I click, but my position remains in the same place.

[liamdebeasi]

Thanks for the follow up. I was able to reproduce the issue. There are actually two bugs in here.

The first bug is what you described where the scroll position is being restored.

The second bug is https://github.com/ionic-team/ionic/issues/20830. Ionic React should not allow navigation from /pageone to /pageone as they are the same page. You should use parameter navigation such as /pageone/:id instead (See: https://ionicframework.com/docs/react/navigation#url-parameters for more information).

Steps to reproduce

1. Download https://github.com/liamdebeasi/ionic-react-scroll-position-bug
2. You will start the app at /home/0.
3. Scroll down and find the ion-button. Click it to navigate to /home/1.
4. During transition, you should notice that the content on /home/0 jumps to the top, and the incoming /home/1 is scrolled to the exact same scroll location you were at prior to navigating.

Current Behavior

When on page /foo/0 and trying to navigate to page /foo/1, Ionic React will perform a nav transition to take you to /foo/1 but will maintain your scroll position.

Expected Behavior

The current behavior is not in line with what happens in Ionic Angular. Navigating from /foo/0/ to /foo/1 should not restore your scroll position since it is a new page.

[ibrahimmkara]

When is the problem resolved.Can you give some information about it?

[liamdebeasi]

I have confirmed this is a bug; however, we do not typically comment on the timeline for bug fixes.

[ibrahimmkara]

Thank you for your interest.Good work...

[elskwid]

@liamdebeasi We're seeing something similar in a client project. We have a list screen using infinite scroll with cards that, when tapped, display some details. Works a treat in the iOS simulator but we see the behavior you describe when using the desktop browser in responsive design mode. (FireFox 75.x).

I started poking around for an example app and found that the Conference app has the same issues.

• Open the browser
• Switch to responsive design mode
• Scroll down to the bottom of the schedule
• Tap any item
• Click back
• Schedule list is reset to the top

We see both the scroll to top of the list and the scroll to list position in the detail component.

[davorduhovic]

This issue is actually quite big. The problem is when navigating between pages with route params, not only that it remembers scroll position but it also remembers page data and everything.

For example: If you have route /category/:id, then you first go on /category/1 page and load some data from api-a asynchronously by code you passed through route params. After that from /category/1 page you want to go to /category/2 page and you will see the same data which you loaded on /category/1 page until your new request is finished. Also, /category/1 ionViewWillLeave and ionViewDidLeave events are not even fired which means the new route is reusing same page component.

You would expect when you navigate to a new page from /category/1 to /category/2 that new page is loaded with fresh state and all the events working as intended, and that new page is added to navigation stack and working with router history for navigating back and front.

You can reproduce the same behaviour on https://ionic-react-conference-app.firebaseapp.com/speakers part if you link from one speaker-detail page to another, let's say from bear speaker to cheetah speaker (/speakers/speaker/1 -> /speakers/speaker/2). You would see that cheetah image is loaded instead of bear image while you are still at /speakers/speaker/1 route and navigation animation didn't yet finish. It's a little bit less noticeable there because data in the conference app is loaded from state and is not async load so you can see it just for a short time.

I think adding some kind of stack navigation like it used to work before in Ionic with push/pop stack would solve a lot of these issues that I saw popping here, a lot of those issues are happening because when you navigate from one route to another with route params it actually reuses the same Page component.

Also I bealive this issue is only happening in @ionic/react version.

[ibrahimmkara]

ı solved my problem. if not quite right.I can do the things I need to do. I used to use React's Link library before.I am currently using the a tag from html to link, this tag works as I want

[alicerocheman]

Im still having this issue, it is pretty problematic. Are there any news?

For context: On my /foo/:id page, at the bottom i have a list of other /foo/:id links. when i click on one of these links, i seemingly stay right where i was, scrollwise at least, or sometimes it scrolls up just a bit (depending on some contents changing size in the page) and it is not a "fresh" page (some stuff that was initialized on page /foo/1 doesn't get reinitialized on page /foo/2.

This is really annoying and I don't even know exactly how to quickly/cleanly fix this while I wait for a library fix. I see this issue is 3 years old, it's been said above that you guys don't usually comment on a timeline for bug fixes, so I barely dare to ask... :/

[lovelyKarthi]

IonContent Scroll reset after list click. This is really annoying, help needed how to fix this?

[lovelyKarthi]

IonContent Scroll reset after list click. This is really annoying, help needed how to fix this?

I have solved my issue following code after click <IonContent .../> reset scroll like shown in the gif

<IonCard
            onClick={indentBidding}
            className={`${cardStyle} p-0`}
            button
            mode="md"
 >...</IonCard>

By adding tabIndex={0} Solved my problem

<IonCard
            onClick={indentBidding}
            tabIndex={0}
            className={`${cardStyle} p-0`}
            button
            mode="md"
>...</IonCard>