'React App - button click taking iphone users to top of screen

In a React web app I have created I have noticed when testing on iphone that clicking a load more button is taking users to the top of the screen.

In desktop or android it will load more products below and keep the scroll where expected. Seems to be device specific and not browser specific.

Has anyone come across this strange behaviour before? Anything wrong with my code?

Button code is as below:

<button
    type="button"
    onClick={handleLoadMoreProducts}
  >
    Load More
</button>

The handleLoadMoreProducts method is fairly straight forward - it fetches the next page worth of products and adds them to the array - however changing the onClick event to just console.log('Hello World') still causes the jump to the top.

Any ideas? Anyone else experiencing this?

Solution 1:^[1]

According to this link: https://gravitydept.com/blog/js-click-event-bubbling-on-ios the issue is due to Safari. Safari on the iPhone does not support event delegation for click events, unless the click takes place on a link or input.

A suggested workaround is to do the following

if (gravdept.isIos()) {
    document.querySelector('html').classList.add('is-ios');
}

This snippet relies on a tiny user-agent detection library and some simple JavaScript.

Solution 2:^[2]

So I have found the issue. I was focused on the onClick event and thinking it was some sort of browser behaviour. Turns out it was due to a CSS class which had been added to support IE on each product card @supports (display: grid) { display: grid; } Removing this fixed the screen jumping to the top. I suppose it is more important to have things working for IPhone IoS than the 2 users still on IE these days.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Kostas Panagiotakis
Solution 2	Sprose

'React App - button click taking iphone users to top of screen

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]