Postgres: Cursor position in query editor is wrong when using Cyrillic characters

[DmitrySidorow]

What happened:
In some cases, the input cursor may be set to the wrong position

How to reproduce it:
Select "postgresql" datasource and insert this query:
SELECT speed as "скорость" FROM table

If cyrillic characters are contained, the cursor is set to the wrong position after them

For example a space is selected here, but highlighted F

Environment:

• Grafana version: v8.1.2-31763
• Data source type & version: Postgresql ?
• User OS & Browser: Windows 10 + latest chrome

[dprokop]

@DmitrySidorow thanks for reporting this. I can reproduce the issue in Chrome on both MacOS and Windows. Here's a recording of my repro:

I suspect this has somethng to do with fonts loaded in Chrome. While Firefox and Safari renders the Cyrillic characters using the same font as the rest of the query, Chrome renders those using default font.

In Safari/Firefox it seems to work ok.

[DmitrySidorow]

hello, what status of this problem? nothing has changed in the latest version of chrome

[Tander]

Reproduced it on latest version (8.3.4), both latest Chrome and Firefox.
This bug happens because of font. Grafana using Roboto Mono for editor. It's not mono-space for cyrillic symbols.

Grafana using Ace editor for editing query, and it requires monospace font. According to this issue (ajaxorg/ace#2548), excluding Roboto Mono from fonts for this editor solves this problem.

Basically, adding this to css solves the problem entirely:

.ace_editor, .ace_editor * { font-family: "Monaco", "Menlo", "Ubuntu Mono", "Droid Sans Mono", "Consolas", monospace !important;}

@dprokop I know it's low-priority issue, but applying fix on your side shouldn't take too long, so I hope you'll patch this issue soon (it's really a pain to apply patch inside Docker container) =)

[zoltanbedi]

Thanks for the workaround @Tander. We completely reworked the query builder and the code editor for the postgres datasource. This shouldn't be an issue anymore.