graphql / graphql/graphiql

[graphiql] Unable to scroll parent container when hovering the query editor or query result

Open
#4,142 0 comments 2 reactions 0 assignees View on GitHub
bug graphiql
Dominant language
TypeScript
Stars
16.9k
Forks
1.9k
Avg merge
22h 45m
Merged PRs (30d)
70

Description

### Is there an existing issue for this?

- [x] I have searched the existing issues

### Current Behavior

When graphiql component is used in a context where there are other elements in the page it's not possible to scroll the parent element when hovering the query editor or the query result panel. This is coming from the fact that monaco editor stop the propagation of the scroll event.
Monaco editor expose an option to allow to not stop the scroll events:

options={{
scrollbar: {
alwaysConsumeMouseWheel: false
}
}}

The consequence is **really not user friendly** as the user doesn't understand why he cannot scroll as usual.

when hovering the query editor and query result, the parent / main page scroll should scroll after the scroll in editor reach the top or the end.

### Expected Behavior

The top parent container should scroll after the internal editor finished to scroll.

### Steps To Reproduce

Use the graphiql component in this context:

This is a content

and render the Graphiql in the graphiql-container div.

Then hover the query editor and scroll up.

The page doesn't scroll to the top

### Environment

* GraphiQL Version: 5.2.2
* OS: Linux
* Browser: Chrome
* Bundler: webpack
* `react` Version: 18
* `graphql` Version: 15.5.1

### Anything else?

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.