QueryField: Remove carriage return character from pasted text (#34076)

* Remove carriage returns

* Clean up

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

@@ -30,6 +30,17 @@ describe('<QueryField />', () => {
     expect(onRun.mock.calls.length).toBe(1);
   });
 
+  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" />
+    );
+    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');
+  });
+
   it('should run custom on blur, but not necessarily execute query', () => {
     const onBlur = jest.fn();
     const onRun = jest.fn();

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

@@ -148,9 +148,9 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
 
   runOnChange = () => {
     const { onChange } = this.props;
-
+    const value = Plain.serialize(this.state.value);
     if (onChange) {
-      onChange(Plain.serialize(this.state.value));
+      onChange(this.cleanText(value));
     }
   };
 
@@ -190,6 +190,12 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
     return next();
   };
 
+  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, '');
+    return newText;
+  }
+
   render() {
     const { disabled } = this.props;
     const wrapperClassName = classnames('slate-query-field__wrapper', {