Skip to content

fix(inputgroup): Prevent infinite re-render loop in Leading/TrailingItems - #121043

Draft
sentry[bot] wants to merge 2 commits into
masterfrom
seer/fix/input-group-max-update-depth
Draft

fix(inputgroup): Prevent infinite re-render loop in Leading/TrailingItems#121043
sentry[bot] wants to merge 2 commits into
masterfrom
seer/fix/input-group-max-update-depth

Conversation

@sentry

@sentry sentry Bot commented Aug 2, 2026

Copy link
Copy Markdown
Contributor
This PR addresses the "Maximum update depth exceeded" error occurring in `InputGroup.LeadingItems` and `InputGroup.TrailingItems`.

Problem:
The useLayoutEffect in these components included children in its dependency array. When the parent InputGroup re-rendered, children would often receive a new object identity, even if its content was visually the same. This triggered the useLayoutEffect to call setLeadingWidth or setTrailingWidth, which in turn caused the parent InputGroup to re-render, creating an infinite loop.

Solution:

  1. Replaced children dependency with ResizeObserver: The useLayoutEffect now initializes a ResizeObserver to monitor the actual offsetWidth of the ref.current element. This ensures that the effect only triggers when the physical dimensions of the leading/trailing items change, rather than when the children prop's reference changes.
  2. Simplified width measurement: Removed the reliance on entries[0]?.borderBoxSize[0]?.inlineSize as it caused issues in JSDOM (Jest tests). Instead, el.offsetWidth is used directly within the ResizeObserver callback, which is simpler and more robust across environments.
  3. Proper cleanup: The ResizeObserver is disconnected when the component unmounts to prevent memory leaks.

This change ensures that setLeadingWidth and setTrailingWidth are only called when truly necessary, resolving the infinite re-render loop.

Legal Boilerplate

Look, I get it. The entity doing business as "Sentry" was incorporated in the State of Delaware in 2015 as Functional Software, Inc. and is gonna need some rights from me in order to utilize my contributions in this here PR. So here's the deal: I retain all rights, title and interest in and to my contributions, and by keeping this boilerplate intact I confirm that Sentry can use, modify, copy, and redistribute my contributions, under Sentry's choice of terms.

Fixes JAVASCRIPT-3AYS

Comment @sentry <feedback> on this PR to have Autofix iterate on the changes.

@github-actions github-actions Bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Aug 2, 2026
@github-actions

github-actions Bot commented Aug 2, 2026

Copy link
Copy Markdown
Contributor

Story previews

Preview the stories changed in this PR on the Vercel deployment:

Preview deployment: https://sentry-dnj04fi4c.sentry.dev

@sentry sentry Bot changed the title fix(inputGroup): Prevent maximum update depth exceeded in Leading/TrailingItems fix(inputgroup): Prevent infinite re-render loop in Leading/TrailingItems Aug 2, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Scope: Frontend Automatically applied to PRs that change frontend components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

0 participants