Webpage wrong focus after navigating to new screen on Reactive
Application Type
Reactive
Service Studio Version
11.10.0 (Build 34711)

Hi there!

Sorry for the long title but this one is quite hard to properly describe.

So this is what happens, the client is complaining the page shift focus after navigating to a new page, example: after clicking on a link the new page focus on the footer of the page rather than the top.

This behavior also happens when a pop up is open, the page shift focus to the very top instead of remaining on the same spot.

Now here's another issue - I cannot replicate it! I tried in all major browsers (Edge, Opera, Chrome and FF) and the page behavior is exactly as expected, no weird focus shifts happen. The client says it happens on both Chrome and FF, both versions are up to date.

So I don't even know where to start, i tried some research but it got me nowhere so here I am asking if anyone has ever experienced any of this.

Thank you all,

J Grou

Champion

Hi  J Grou,
I guess maybe some of the links on your Footer are using autofocus property. If yes then better remove that & test on Incognito window.

Hope it helps,
Assif

Hi assif, I did look for it but no, no autofocus enabled there. So far the only thing i tried was to change the module default transition to none, as its the only thing I see could have some sort of impact on the focus. But I can only tell if it worked after the client test it.

Hi J Grou,

Hard task,

The client has the problem but the developer is unable to reproduce, first of all, ask the client to test in a completely clean browser (cache, cookies).

If he still has the problem, make a video and post it here to try a solution.

Hi Huarlem!

Unfortunately I don't have access to the client tests, but I will try to pass the message. Having said that, I can also only ask for some to try and record a video of the issue, as I myself haven't seen it either with my own eyes, only description.

We had similar issues on our Reactive App, and noticed the issue during our tests. It took us a while to reproduce the problem consistently. Infact In big screens this was not visible but in small screens we could see the shift of focus to the footer.  And we also found that the focus shifted to the footer of the new page only when the previous page was scrolled to the bottom.

We followed the steps from this thread https://www.outsystems.com/forums/discussion/62784/scroll-to-top-on-navigation-in-react-app/ and the problem was resolved


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.