QueryFields/Input fields are broken in the recent Chrome browser

[matyax]

Initially reported here.

It seems that there are some inputs, or combination of inputs, that potentially cause cursor jumps/focus loss on the code editor.

Some examples both in Firefox and Chrome:

Firefox.mov

Chrome.mov

[aknuds1]

It's also browser dependent. I'm not having this problem in MacOS (Chrome), nor in Firefox on Arch Linux. The one browser where I'm having problems is Chromium on Arch Linux. F.ex. if I type "na" into the query input using Chromium, the following text appears: Enter a Loki query (run with Shift+Enter)na.

Still in Chromium, if I type first an opening curly bracket, then "n", auto-completion adds a closing curly bracket to the code input and moves the caret after it, so I end up typing f.ex. {n}amespace="cortex-prod-09" instead of {namespace="cortex-prod-09"}.

Another observation is I don't have this problem if my data source is Prometheus.

[svennergr]

Also adding my short observation from Chrome on MacOS.

Screen.Recording.2022-08-31.at.16.20.32.mov

[svennergr]

I noticed, that this is not only the case for the code-editor but also other input fields. In my case it was the derivedFields URL input.

[mwoodson-cb]

This is happening to me on MacOS, Chrome 105.0.5195.52. Yesterday this wasn't happening, I updated chrome, and now it's happening. Not sure if it's related, but it's bugging!

I type chars in, and it "ends" (like you would hit the end key, goes to the end of the line) and then other weird characters start appearing. Very strange.

This is happening to me in the metric box when I edit a panel. I am not using Loki, so this may or may not be related

[outinspace]

This started happening for me today.

MacOS 12.5.1.
Chrome Version 105.0.5195.52 (Official Build) (x86_64)

I didn't experience this on Firefox.

[honganan]

Also adding my short observation from Chrome on MacOS.

Screen.Recording.2022-08-31.at.16.20.32.mov

I caught this too. In MacOS, after upgrading Chrome to 105.0.5195.52（Official Build） (arm64). I received user reports then I tested, before upgrading it's ok, and after upgrading it acts like this video shows. Safari works alright, not sure how it happends.

[mwennrich]

same on Ubuntu (latest Chrome)

[lucagouty]

same here, wasn't happening yesterday, MacOS Chrome 105.0.5195.52

[slipvayne]

same here.
before it was already happening in Chrome browser for android devices but now it started to happen also in Chrome for windows (105.0.5195.54).

UPDATE:
Microsoft Edge also stopped working (105.0.1343.27)
Firefox works fine (104.0.1)

Something related with chromium.

[svennergr]

Thanks for your feedback, which we highly appreciate.

We narrowed down the issue and are working on a bugfix.

[mwoodson-cb]

I assume a bug fix means a new release. We aren't going to jump on a new upgrade immediately.

Is there anything we can tweak in chrome to make this work while a bug fix is being worked on? Any hints on what changed in chrome to make this stop working so it can be tweaked back in the short term while we do get the bug fix and are able to upgrade grafana?

[svennergr]

Is there anything we can tweak in chrome to make this work while a bug fix is being worked on? Any hints on what changed in chrome to make this stop working so it can be tweaked back in the short term while we do get the bug fix and are able to upgrade grafana?

I am unsure about tweaks in Chrome itself and also unsure what they exactly changed, such that this is failing now. I will try to check on that.

You can follow the patch/change in this PR #54566. If that gets merged to main you can run your Grafana from that branch.

[shipa988]

I have the same issue with Chrome 105.0.5195.52 от macOS 12.4

[nikitapecasa]

@svennergr Hi 👋

I have one more important observation and a question.

• I'm getting the same chrome specific issue in Grafana v8.2.7 (d2cccfe), but interestingly enough not in v9.0.1 (14e988b).
• Would the fix be back-ported to 8.2.x? or only to 9.1.x?

In my case the issue in 8.2.7 is the same as @mwoodson-coinbasecloud described - query editor jumps to the end on each key press and weird symbols appear (ufeff).

Works ok in Safari. Does not work in chrome and chrome canary.

• Grafana v8.2.7
• macOS 12.4
• safari Version 15.5 (17613.2.7.1.8)
• chrome canary Version 107.0.5272.0 (Official Build) canary (arm64)
• chrome Version 105.0.5195.52 (Official Build) (arm64)

[iameli]

Getting this in both Brave and Chrome.

Brave:
Version 1.43.89 Chromium: 105.0.5195.102 (Official Build) (arm64)

Chrome:
Version 105.0.5195.102 (Official Build) (arm64)

[jcputter]

will this fix be backported to 7.4.~ release ?, i have some old install with that along with 9.1.3...Firefox 104.0.1 seems ok but Chrome 105.0.5195.102 is broken

[yongzhang]

same issue, expecting an emergency fix

[daniel-anova]

Microsoft Edge v105.0.1343.27 has joined the list of chrome-based browsers affected by this issue.

[asvatov]

Ubuntu 18.04 and Chrome 105.0.5195.102 (Official Build) (64-bit)
After updating Chrome I faced inadequate behaviour of input.

[asaf400]

Just tested the image 8.5.12 Same problem.

Upd: Image 8.5.12 already deleted from DockerHub.

Upd: New image 8.5.13 works fine!

be warned!
8.5.13 image also has an issue with inviting users,
the fix has not been released, but has been merged with the v8.5.x branch:
https://github.com/grafana/grafana/pull/51964/files - issue introduced
https://github.com/grafana/grafana/pull/55585/files - issue fixed

related:
#51634 (comment)
#52894
https://github.com/grafana/grafana/blob/release-8.5.13/pkg/api/org_invite.go#L73

[fredr]

I'm having similar problems in grafana 9.1.7 with firefox (105.0.3-1). It happens especially when using ~. Not sure if I should open a new issue, or report it here, but I was asked in the loki slack to write in this issue.

Screencast.from.2022-10-20.15.39.51.webm

[dewe]

The tilde problem happens to me as well, when using Chrome. I looks exactly like this older issue.

[mator]

any chance to release updated 7.5.x version of grafana with this fix? thanks!

[ashharrison90]

@mohammedafzal0702 as @dongseokk this was fixed and released in v7.5.17

@mator ☝️

[dfenerski]

This seems to be still an active issue in latest loki-stack helm charts

[daniel-koudouna]

This seems to be still an active issue in latest loki-stack helm charts

If anyone still encounters this issue, the default tag for the loki-stack helm chart and possibly others has not been updated. Set grafana.image.tag in your values yaml to a newer version, e.g:

grafana:
  enabled: true

  image:
    tag: 10.3.1