Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] Infinite rerender loop when tooltip is open for an anchor that is inside a scrolled overflow #1146

Closed
johannkor opened this issue Dec 28, 2023 · 2 comments · Fixed by #1169
Labels

Comments

@johannkor
Copy link
Contributor

johannkor commented Dec 28, 2023

Bug description
When you open a tooltip whose anchor is inside a scrollable container (with overflow:scroll), if you scroll the container so that the anchor is hidden inside the overflow, Tooltip goes into a computePosition rerender loop.

Version of Package
v5.25.1

  • @floating-ui/dom: 1.5.1

To Reproduce

  1. Clone this repo
  2. Replace src/index-dev.ts with this:
import React, { useRef } from 'react'
import ReactDOM from 'react-dom'
import { TooltipController as Tooltip } from 'components/TooltipController'
import { TooltipRefProps } from 'components/Tooltip/TooltipTypes'
import './tokens.css'

const ANCHOR_ID = 'anchor'

function App() {
  const tooltipRef1 = useRef<TooltipRefProps>(null)

  return (
    <>
      <div
        style={{
          display: 'flex',
          alignItems: 'flex-start',
        }}
      >
        <main
          style={{
            maxHeight: '50vh',
            overflowY: 'scroll',
          }}
        >
          <div style={{ width: '300px', border: '1px solid gray' }}>
            <span id={ANCHOR_ID} style={{ border: '1px solid red', fontSize: '30px' }}>
              anchor
            </span>
            {/* force overflow so we have something to scroll */}
            <div style={{ height: '100vh' }}></div>
          </div>
        </main>

        <aside>
          <button
            onClick={(e) => {
              e.preventDefault()
              e.stopPropagation()

              tooltipRef1.current?.open({
                anchorSelect: `#${ANCHOR_ID}`,
                content: 'Hello world!',
              })
            }}
          >
            open tooltip
          </button>
        </aside>
      </div>

      <Tooltip ref={tooltipRef1} />
    </>
  )
}

ReactDOM.render(<App />, document.getElementById('app'))
  1. Run yarn and yarn dev
  2. Open the dev server in a browser
  3. Click on the button to open the tooltip
  4. Scroll the left container down so that the anchor goes up and gets hidden
  5. Open console, see that Tooltip is now rerendering constantly (place a logpoint or console.log() inside Tooltip.tsx's render)
  6. Scroll down so that the anchor is visible
  7. Notice that it now only rerenders when it needs to (e.g. scroll changes)

Expected behavior
I would expect it to only update the position when necessary

Screenshots

Desktop (please complete the following information if possible or delete this section):

  • OS: macOS Sonoma
  • Browser: Chrome 120
  • Frameworks: React 16, React 18 (non-concurrent mode)

Additional context

@gabrieljablonski
Copy link
Member

Beta version react-tooltip@5.26.1-beta.1169.0 (from #1169) improves how the tooltip handles some internal states, which seems to fix this.

Feel free to test test it out until we release an official version.

@gabrieljablonski
Copy link
Member

Fixed on official release react-tooltip@5.26.2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants