Skip to content

fix(segment-view): prevent NaN/Infinity scrollRatio when a single content item is present#31113

Open
OS-susmitabhowmik wants to merge 5 commits intonextfrom
ROU-12691-fix-ion-segment-error
Open

fix(segment-view): prevent NaN/Infinity scrollRatio when a single content item is present#31113
OS-susmitabhowmik wants to merge 5 commits intonextfrom
ROU-12691-fix-ion-segment-error

Conversation

@OS-susmitabhowmik
Copy link
Copy Markdown

Issue number: resolves internal


What is the current behavior?

Currently if there is a single content item present the scrollRatio is computed as NaN or Infinity resulting in a console error.

Screenshot 2026-05-05 at 1 42 51 PM

What is the new behavior?

Updates handleScroll in ion-segment-view to skip handleScroll if max <= 0

Does this introduce a breaking change?

  • Yes
  • No

Other information

@OS-susmitabhowmik OS-susmitabhowmik added the type: bug a confirmed bug report label May 5, 2026
@vercel
Copy link
Copy Markdown

vercel Bot commented May 5, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
ionic-framework Ready Ready Preview, Comment May 6, 2026 7:25pm

Request Review

@github-actions github-actions Bot added the package: core @ionic/core package label May 5, 2026
@OS-susmitabhowmik OS-susmitabhowmik marked this pull request as ready for review May 5, 2026 20:01
@OS-susmitabhowmik OS-susmitabhowmik requested a review from a team as a code owner May 5, 2026 20:01
@OS-susmitabhowmik OS-susmitabhowmik requested a review from ShaneK May 5, 2026 20:01
Copy link
Copy Markdown
Member

@ShaneK ShaneK left a comment

Choose a reason for hiding this comment

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

Nice! Just a couple things to make this bullet-proof

const { scrollLeft, scrollWidth, clientWidth } = ev.target as HTMLElement;
const max = scrollWidth - clientWidth;
// When only one content item is present max is 0 — skip to avoid NaN/Infinity scrollRatio.
if (max <= 0) return;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Mind adding a quick Playwright test for this in test/basic/segment-view.e2e.ts? A single ion-segment-content that scrolls and asserts ionSegmentViewScroll doesn't fire (or fires with a finite scrollRatio) would lock the regression in. Without one, the next refactor of handleScroll can put the NaN back silently.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Great call! Added a regression test in these commits: b761da8 and 0302f23

const { scrollLeft, scrollWidth, clientWidth } = ev.target as HTMLElement;
const max = scrollWidth - clientWidth;
// When only one content item is present max is 0 — skip to avoid NaN/Infinity scrollRatio.
if (max <= 0) return;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

The early return also skips resetScrollEndTimeout(). If setContent set isManualScroll = false and started the timer, then a scroll event lands in the max <= 0 branch, the timer doesn't get extended on this event and isManualScroll could clear early. I think it's fine in practice since a non-overflowing element shouldn't really fire scroll events, but worth a sanity check to just go ahead and resetScrollEndTimeout in the if body.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Updated to include resetScrollEndTimeout within the if block as a part of this commit dcbf391

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package type: bug a confirmed bug report

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants