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

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?

CodePudding user response：

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.

CodePudding user response：

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.