graphql / graphql/graphiql

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

Open
#2,859 21 comments 1 reaction 1 assignee Claimed by @acao 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 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](https://github.com/graphql/graphiql/tree/main/packages/graphiql-plugin-explorer#usage)

### Expected Behavior

The caret shouldn't jump to the beginning.

### Steps To Reproduce

```Markdown
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
- [X] graphiql-esm
- [ ] graphiql-commonjs

### Environment

```Markdown
- 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_

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.