diff --git a/packages/grafana-ui/src/components/QueryField/QueryField.test.tsx b/packages/grafana-ui/src/components/QueryField/QueryField.test.tsx
index 2136dbe0419..c3c35ef6b99 100644
--- a/packages/grafana-ui/src/components/QueryField/QueryField.test.tsx
+++ b/packages/grafana-ui/src/components/QueryField/QueryField.test.tsx
@@ -30,6 +30,17 @@ describe('', () => {
expect(onRun.mock.calls.length).toBe(1);
});
+ it('should run onChange with clean text', () => {
+ const onChange = jest.fn();
+ const wrapper = shallow(
+
+ );
+ 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();
diff --git a/packages/grafana-ui/src/components/QueryField/QueryField.tsx b/packages/grafana-ui/src/components/QueryField/QueryField.tsx
index 7f0ea9e2f6f..2aa7fbc9548 100644
--- a/packages/grafana-ui/src/components/QueryField/QueryField.tsx
+++ b/packages/grafana-ui/src/components/QueryField/QueryField.tsx
@@ -148,9 +148,9 @@ export class QueryField extends React.PureComponent {
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