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

packages/grafana-ui/src/components/QueryField/QueryField.test.tsx

@@ -36,7 +36,24 @@ describe('<QueryField />', () => {
       <QueryField query={`my\r clean query`} onTypeahead={jest.fn()} onChange={onChange} portalOrigin="mock-origin" />
     );
     const field = wrapper.instance() as QueryField;
-    field.runOnChange();
+
+    field.runOnChange(false);
+    expect(onChange.mock.calls.length).toBe(1);
+    expect(onChange.mock.calls[0][0]).toBe('my\r clean query');
+
+    field.runOnChange(true);
+    expect(onChange.mock.calls.length).toBe(2);
+    expect(onChange.mock.calls[1][0]).toBe('my clean query');
+  });
+
+  it('should clean the text when running the query', () => {
+    const onChange = jest.fn();
+    const wrapper = shallow(
+      <QueryField query={`my\r clean query`} onTypeahead={jest.fn()} onChange={onChange} portalOrigin="mock-origin" />
+    );
+    const field = wrapper.instance() as QueryField;
+
+    field.runOnChangeAndRunQuery();
     expect(onChange.mock.calls.length).toBe(1);
     expect(onChange.mock.calls[0][0]).toBe('my clean query');
   });

packages/grafana-ui/src/components/QueryField/QueryField.tsx

@@ -146,11 +146,11 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
     });
   };
 
-  runOnChange = () => {
+  runOnChange = (sanitize = false) => {
     const { onChange } = this.props;
     const value = Plain.serialize(this.state.value);
     if (onChange) {
-      onChange(this.cleanText(value));
+      onChange(sanitize ? this.cleanText(value) : value);
     }
   };
 
@@ -166,7 +166,7 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
   runOnChangeAndRunQuery = () => {
     // onRunQuery executes query from Redux in Explore so it needs to be updated sync in case we want to run
     // the query.
-    this.runOnChange();
+    this.runOnChange(true);
     this.runOnRunQuery();
   };
 
@@ -177,6 +177,7 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
     const { onBlur } = this.props;
 
     if (onBlur) {
+      this.runOnChange(true);
       onBlur();
     } else {
       // Run query by default on blur