graphiql: Unexpected Cursor Offset when hitting Enter

I also experienced this issue. Following @halvespereira 's instructions where I removed graphiql entirely, installed graphiql@1.3.0 (which works), and then upgraded to graphiql@1.3.2 which still fixed it.

I definitely suspect some sort of dependency issue is at play.

@acao have you done anything to the code? It suddenly works in development and in production. At least it does now.

Something interesting just happened to @etiennedi

1. started out on graphiql@1.3.2 - issue occurs
2. downgraded to graphiql@1.3.0 - issue gone
3. upgraded to graphiql@1.3.1 - issue still gone
4. upgraded back to graphiql@1.3.2 - issue still gone
5. rm -rf node_modules && npm install - issue still gone

However, when I tried to reproduce this, the issue was still there for me in all versions.

@acao The cursor offset bug is happening again in the development environment. It’s strange because I didn’t touch that code from the time it was working properly to now.

I did update a few dependencies but not the graphiql. We will keep you updated. Please keep us updated as well if you are able to detect what’s potentially causing it. Thanks.

Thanks so much for the help so far @acao!

To add to what our production config is:

• We’re copying the build folder into an nginx docker image (the contents of the build folder is the same that works with npx serve ./build)
• The docker container runs on K8s (GKE) exposed through an Ingress with Google’s load balancer with both HTTP and HTTPS. (Switching between HTTP and HTTPS makes no difference. I was suspecting that something might have been blocked by some odd mixed content errors, but there aren’t any)
• We do use Google Cloud CDN (on top of the LB), so we cannot (yet) rule out that something is cached that shouldn’t be. However, all other changes we deploy continuously are always present, making a caching issue less likely
• The issue also occurs with a completely blank browser (to rule out local storage, browser caching, etc.)

We will also go through our build process step-by-step to see if we can identify anything that breaks it (e.g. running from a Docker container, serving the app through nginx, etc.) - but it will probably take a few days to get back on this.

It’s gone. Thanks for the comments. They helped me think a little better of the issue. I have this additional toolbar button which copies the query to clipboard so I can share a link that directs the user straight into the graphiql page with the query already typed and prettified.

I had a ref wrapped around the additional toolbar button which I was using for toggling the component state. Anyway, once I removed the ref, the bug was gone and I found a work around for not using the ref anymore. Don’t know why it was causing it though.

1. No it was the other way around. When I first installed graphiql the bug wasn’t there. Then after a few weeks it showed up and it’s there consistently day in day out.

2. No shortcuts or anything. Just pressing enter. It only happens if Enter is pressed after { , ( etc. But if the cursor is at the beginning of the line with nothing typed, then it goes to the next line as expected without skipping a line.

Sure.

1. Running graphiql: ^1.3.2 on a React app. What’s interesting is that at first it was working as intended but then it started happening. I do need to mention that I’ve uninstall it and reinstalled it again with different version so maybe that caused it. But now I have 1.3.2 installed.
2. Actually using Chrome. Version 88.0.4324.96 (Official Build) (64-bit)
3. Using Windows but @etienedi is using linux and the same happens to him.
4. No. It works fine on the Netlify app.