Fix cursor jumping when typing in GraphQL API console#57862
Conversation
| private onEditQuery = (newQuery?: string): void => | ||
| this.updateStateParameters(parameters => ({ ...parameters, query: newQuery })) | ||
| this.updates.next({...this.state.parameters, query: newQuery}) |
There was a problem hiding this comment.
reading through this component, this means that the state in this.state.parameters will get outdated over time, right?
We pass that to GraphiQL as the query field, so I wonder if other reasons to rerender might cause it to reset now?
Or is the query field basically the first value to use and never read again?
If this is not the case, I think we should drop the update state parameters thing entirely and also just call setState for variables and operationName as well for consistency, wdyt?
There was a problem hiding this comment.
So I tried breaking this by trying to get it to rerender in other ways, and it just doesn't 🤷♂️
From the source code comments, it seems like the query param is there if you want to control the query of the editor programmatically. But in the way we're using it, we're basically doing both. The user is typing, and then we're setting it again to what the user typed, which causes the weird race condition.
But yeah could definitely see if we can remove the query state completely then
073bcac to
09d9279
Compare
Naive attempt at fixing this very annoying bug in the GraphQL API console where the cursor jumps back while you're typing: https://www.loom.com/share/e5d50b5f6bcd4a8eb6ae08cc6a3832f2
This happens because
this.setStateis called on every keypress when the query gets updated, which causes a component rerender. It seems like when the component and the state go out of sync, it rerenders completely, causing the cursor to jump back.This PR makes a small change so that
this.setStateis not called in theonEditQueryfunction, and only the URL gets updated. This means that a link to the query is still shareable, but it shouldn't trigger the mass re-rendering it's currently doing.Test plan
Tested by typing a whole bunch. Also made sure the URLs are still shareable.