[graphiql] The text cursor doesn't work well in the Playground page. It doesn't point correctly to end of the line or end of the text.

[557029]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

I have problems with GraphQL Playground page. It stopped working yesterday.I have solved this problem like that:

#4033 (comment)

However, the new page has text cursor issue. The cursor doesn't go to the end of line.

Expected Behavior

• Selection should cover all text.
• when user clicks "End" button, the cursor should go to the end of line.

Steps To Reproduce

1. Open GraphQL 5.0.0 Playground Page
2. Enter and longer than 20 characters text.
3. Check the cursor location.
4. Select all text with Cmd + A,
5. Check how text will be selected.

Environment

• GraphiQL Version:
• OS: Windows
• Browser: Chrome, Edge
• Bundler:
• react Version: 19
• graphql Version: 5.0.0

Anything else?

No response

[dimaMachina]

can't reproduce, can you film short video?

[557029]

Unfortunately, I can't get the video.
This is what I see when I type any text into the query window and try to go to the end of the line.
The selected text is what was selected from the first to the last character in the line. When I type the text, even the cursor blinks not at the end of the line. It is offset.

[dimaMachina]

thanks, I was able to reproduce your issue, happens only on Windows, will try to find a fix

[dimaMachina]

@557029, @Mackey780, @OlaSkeie and @PhilipVLam

Caret issue on Windows was fixed in graphiql@5.0.2

Let me know what we can improve more, GraphiQL 5 was a huuuge release 🙂

[557029]

Dimitri, thank a LOT for your assistance!

[Mackey780]

Thank you @dimaMachina!

One bug I've found (I'm not convinced it isn't some other environmental/browser issue so not creating GH issue) is that tab line indicators can (in some situations) drift out of position as they are slightly too narrow.

Notes:

• Affects Edge but not Firefox
• When the zoom is adjusted off the zoom it loaded on tabs display correctly but revert to error if returning to the original zoom.

[dimaMachina]

@Mackey780 can you film short video of your issue? Because I see 1234567890 as selection name and it's invalid selection name

[Mackey780]

@dimaMachina
The 1234567890 was meant simply as a count of characters to show the 10th position, which should be perfectly in line with a tab indicator line, but is halfway between two.

Here is a video showing the offset with nested brackets, and how zooming 'fixes' it.