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).

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', () => {

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;
   }