Skip to content

fix(infinite-scroll): remaining in threshold after ionInfinite can trigger event again on scroll - #28569

Merged
liamdebeasi merged 9 commits into
feature-7.6from
FW-5328
Dec 5, 2023
Merged

fix(infinite-scroll): remaining in threshold after ionInfinite can trigger event again on scroll#28569
liamdebeasi merged 9 commits into
feature-7.6from
FW-5328

Conversation

@liamdebeasi

@liamdebeasi liamdebeasi commented Nov 21, 2023

Copy link
Copy Markdown
Contributor

Issue number: resolves #18071


What is the current behavior?

When adding elements to the DOM in the ionInfinite callback, scrolling again would sometimes not cause ionInfinite to trigger again. We set the didFire flag to true before calling ionInfinite. This flag ensures that ionInfinite is not called multiple times if users continue to scroll after ionInfinite is fired but before the complete method is called.

The didFire flag is reset once the user scrolls outside of the threshold. Normally this is fine: If an application adds several new items to a list the current scroll position will be outside of the threshold. However, if the scroll position remains in the threshold (such as if an application append a small number of new items to a list) then the didFire flag will not get reset.

Additionally, there are some instances where the scroll position restoration when position="top" may not work which can cause this bug to trigger as well. For example, if users quickly scroll to the top, the scroll position will not be restored correctly and the scroll position will still be at the top of the screen. That is another instance where this bug can trigger even if a large number of items were added to the DOM.

What is the new behavior?

  • The didFire flag is reset when the complete method is called. This ensures that even if the scroll position is still in the threshold ionInfinite can fire again.

Note that developers may notice ionInfinite firing more times as a result of this change. This can happen when appending a small number of items to the DOM such that the scroll position remains in the threshold. Previously ionInfinite would not fire again, but now it does since users are scrolling in the threshold. I decided to target this change for a minor release to minimize any surprises for developers.

Does this introduce a breaking change?

  • Yes
  • No

Other information

Dev build: 7.5.4-dev.11700602203.1e7155a1

@github-actions github-actions Bot added the package: core @ionic/core package label Nov 21, 2023
@liamdebeasi liamdebeasi changed the title Fw 5328 fix(infinite-scroll): remaining in threshold after ionInfinite can trigger event again on scroll Nov 21, 2023
@github-actions github-actions Bot added package: angular @ionic/angular package package: vue @ionic/vue package labels Nov 21, 2023
@liamdebeasi
liamdebeasi changed the base branch from main to feature-7.6 November 21, 2023 21:24
@github-actions github-actions Bot removed package: angular @ionic/angular package package: vue @ionic/vue package labels Nov 21, 2023
@liamdebeasi
liamdebeasi marked this pull request as ready for review November 21, 2023 21:42
@liamdebeasi
liamdebeasi requested review from a team and brandyscarney and removed request for a team November 22, 2023 15:26

@thetaPC thetaPC left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, no issues when testing top and bottom. Minor question, but doesn't block.

Comment thread core/src/components/infinite-scroll/test/small-dom-update/index.html Outdated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug: infinite scroll event does not fire if quickly scrolled

3 participants