From 559ce4db89203118b956abc3ed00b829991152b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Jamr=C3=B3z?= <pm.jamroz@gmail.com>
Date: Wed, 19 May 2021 16:29:48 +0200
Subject: [PATCH] QueryField: Do not modify the query field while typing
 (#34300)

* Do not sanitize the query while typing, but only onBlur or before the query is run

Otherwise sanitized value may cause update Slate component and trigger blur losing focus of the input

* Revert "Do not sanitize the query while typing, but only onBlur or before the query is run"

This reverts commit 00779889

* Avoid changing the input while typing

Cleaning happens on each change and with trimming it changes the value if the user types a space as the last character (may happen quite often while typing a query). In worst cases it's causing losing the focus in Slate if the space is typed before debounced change callback is triggered (500ms).
---
 .../grafana-ui/src/components/QueryField/QueryField.test.tsx  | 4 ++--
 packages/grafana-ui/src/components/QueryField/QueryField.tsx  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-ui/src/components/QueryField/QueryField.test.tsx b/packages/grafana-ui/src/components/QueryField/QueryField.test.tsx
index c3c35ef6b99..1e4deaf59e6 100644
--- a/packages/grafana-ui/src/components/QueryField/QueryField.test.tsx
+++ b/packages/grafana-ui/src/components/QueryField/QueryField.test.tsx
@@ -33,12 +33,12 @@ describe('<QueryField />', () => {
   it('should run onChange with clean text', () => {
     const onChange = jest.fn();
     const wrapper = shallow(
-      <QueryField query={`my\r clean query`} onTypeahead={jest.fn()} onChange={onChange} portalOrigin="mock-origin" />
+      <QueryField query={`my\r clean query `} onTypeahead={jest.fn()} onChange={onChange} portalOrigin="mock-origin" />
     );
     const field = wrapper.instance() as QueryField;
     field.runOnChange();
     expect(onChange.mock.calls.length).toBe(1);
-    expect(onChange.mock.calls[0][0]).toBe('my clean query');
+    expect(onChange.mock.calls[0][0]).toBe('my clean query ');
   });
 
   it('should run custom on blur, but not necessarily execute query', () => {
diff --git a/packages/grafana-ui/src/components/QueryField/QueryField.tsx b/packages/grafana-ui/src/components/QueryField/QueryField.tsx
index 2aa7fbc9548..1191a70380e 100644
--- a/packages/grafana-ui/src/components/QueryField/QueryField.tsx
+++ b/packages/grafana-ui/src/components/QueryField/QueryField.tsx
@@ -192,7 +192,7 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
 
   cleanText(text: string) {
     // RegExp with invisible characters we want to remove - currently only carriage return (newlines are visible)
-    const newText = text.trim().replace(/[\r]/g, '');
+    const newText = text.replace(/[\r]/g, '');
     return newText;
   }