graphql / graphiql

GraphiQL & the GraphQL LSP Reference Ecosystem for building browser & IDE tools.
MIT License
15.94k stars 1.71k forks source link

[graphiql] Info popups lose position on page scroll #3202

Closed lesleydreyer closed 1 year ago

lesleydreyer commented 1 year ago

Is there an existing issue for this?

Current Behavior

If not using the editor as full page (have other divs above or below and scroll enabled by turning off the body css overflow: hidden), the info popups will lose their place on the page when you scroll. I think it's coming from codemirror-graphql > src > utils > info-addon > onMouseOver > info on line 104. I wasn't sure if there's a way to try re-calculating the info if it's not found based on where the editor has scrolled to.

initial position person tooltip works scolled position person tooltip broke
initial position works scrolled position broke

Expected Behavior

Should be able to see the hover tooltips

Steps To Reproduce

1. Temporarily adjust grapiql > src > components > Graphiql.tsx to 
    <div>
       <div style={{height: '200px'}}/>
       ...GraphiQLProvider element that's there
       <div style={{height: '200px'}}/>
    </div>
2. graphiql > resources > index.html.ejs temporarily comment out the body css "overflow: hidden"

Module pattern

Environment

- GraphiQL Version:
- OS:
- Browser:
- Bundler:
- `react` Version:
- `graphql` Version:

Anything else?

No response

dimaMachina commented 1 year ago

@lesleydreyer released in graphiql@3.0.0-alpha.0