[Graphiql Explorer Plugin] (Next.js) Cursor/Caret jumps when editing query manually

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

When editing the query by hand when using the GraphiQL component together with the explorerPlugin passed in the props array, the cursor resets, and appears in the first line of the editor. I’m currently implementing the plugin as stated in the README

Expected Behavior

The caret shouldn’t jump to the beginning.

Steps To Reproduce

1. Clone https://github.com/crjm/graphiql-explorer-test
2. cd into cloned repo, `npm install`
3. `npm run dev`
4. Open Explorer plugin, trigger fields
5. Start typing directly into the editor
6. The caret will jump to the first line of the editor.

Module pattern

• graphiql-umd
• graphiql-esm
• graphiql-commonjs

Environment

- GraphiQL Version: latest
- OS: Ubuntu 22.04
- Browser: Firefox
- Bundler: Next.js (Webpack 5)
- `react` Version: 18.2
- `graphql` Version: 15.8

Anything else?

No response

[bkuzma]

I’m experiencing the cursor jump as well and I’m using neither NextJS nor SSR 😕 I am using the explorer plugin, though I saw the problem occur when I disabled it. One thing I think I noticed: when I removed the explorer plugin along with the code that keeps the user-typed query in state (this is needed for the explorer plugin, see https://github.com/OneGraph/graphiql-explorer-example/blob/master/src/App.js#L88) and sets that query as a prop on the GraphiQL instance, I couldn’t reproduce the problem.

• GraphiQL Version: 2.0.9
• OS: Mac OS Ventura
• Browser: Chrome
• Bundler: Babel
• react Version: 18.2.0
• graphql Version: 16.6.0

[marcosnils]

Here’s a related conversation with a workaround.

In our case we’re using NextJS dynamic imports with without SSR capabilities as described here: https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr. If my understanding is correct, it should be the same as the outcomes you’ve shared. This issue happens only when adding the explorer plugin, so I assume there must be something happening around how both libs are being bundled and initialized in the client-side when using Next.