You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
Clone this repo
Replace src/index-dev.ts with this:
importReact,{useRef}from'react'importReactDOMfrom'react-dom'import{TooltipControllerasTooltip}from'components/TooltipController'import{TooltipRefProps}from'components/Tooltip/TooltipTypes'import'./tokens.css'constANCHOR_ID='anchor'functionApp(){consttooltipRef1=useRef<TooltipRefProps>(null)return(<><divstyle={{display: 'flex',alignItems: 'flex-start',}}><mainstyle={{maxHeight: '50vh',overflowY: 'scroll',}}><divstyle={{width: '300px',border: '1px solid gray'}}><spanid={ANCHOR_ID}style={{border: '1px solid red',fontSize: '30px'}}>
anchor
</span>{/* force overflow so we have something to scroll */}<divstyle={{height: '100vh'}}></div></div></main><aside><buttononClick={(e)=>{e.preventDefault()e.stopPropagation()tooltipRef1.current?.open({anchorSelect: `#${ANCHOR_ID}`,content: 'Hello world!',})}}>
open tooltip
</button></aside></div><Tooltipref={tooltipRef1}/></>)}ReactDOM.render(<App/>,document.getElementById('app'))
Run yarn and yarn dev
Open the dev server in a browser
Click on the button to open the tooltip
Scroll the left container down so that the anchor goes up and gets hidden
Open console, see that Tooltip is now rerendering constantly (place a logpoint or console.log() inside Tooltip.tsx's render)
Scroll down so that the anchor is visible
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):
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
src/index-dev.ts
with this:yarn
andyarn dev
Tooltip.tsx
's render)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):
Additional context
positionStrategy="fixed"
does not resolve this issueThe text was updated successfully, but these errors were encountered: