diff --git a/packages/grafana-ui/src/components/Input/AutoSizeInput.test.tsx b/packages/grafana-ui/src/components/Input/AutoSizeInput.test.tsx
index 2a07011eb8e..e9e7d833bf9 100644
--- a/packages/grafana-ui/src/components/Input/AutoSizeInput.test.tsx
+++ b/packages/grafana-ui/src/components/Input/AutoSizeInput.test.tsx
@@ -46,4 +46,52 @@ describe('AutoSizeInput', () => {
fireEvent.change(input, { target: { value: 'very very long value' } });
expect(getComputedStyle(inputWrapper).width).toBe('304px');
});
+
+ it('should call onBlur if set when blurring', () => {
+ const onBlur = jest.fn();
+ const onCommitChange = jest.fn();
+ render();
+
+ const input: HTMLInputElement = screen.getByTestId('autosize-input');
+
+ fireEvent.blur(input);
+
+ expect(onBlur).toHaveBeenCalled();
+ expect(onCommitChange).not.toHaveBeenCalled();
+ });
+
+ it('should call onCommitChange if not set when blurring', () => {
+ const onCommitChange = jest.fn();
+ render();
+
+ const input: HTMLInputElement = screen.getByTestId('autosize-input');
+
+ fireEvent.blur(input);
+
+ expect(onCommitChange).toHaveBeenCalled();
+ });
+
+ it('should call onKeyDown if set when keydown', () => {
+ const onKeyDown = jest.fn();
+ const onCommitChange = jest.fn();
+ render();
+
+ const input: HTMLInputElement = screen.getByTestId('autosize-input');
+
+ fireEvent.keyDown(input, { key: 'Enter' });
+
+ expect(onKeyDown).toHaveBeenCalled();
+ expect(onCommitChange).not.toHaveBeenCalled();
+ });
+
+ it('should call onCommitChange if not set when keydown', () => {
+ const onCommitChange = jest.fn();
+ render();
+
+ const input: HTMLInputElement = screen.getByTestId('autosize-input');
+
+ fireEvent.keyDown(input, { key: 'Enter' });
+
+ expect(onCommitChange).toHaveBeenCalled();
+ });
});
diff --git a/packages/grafana-ui/src/components/Input/AutoSizeInput.tsx b/packages/grafana-ui/src/components/Input/AutoSizeInput.tsx
index 3aedbe32e78..ae9c2873eef 100644
--- a/packages/grafana-ui/src/components/Input/AutoSizeInput.tsx
+++ b/packages/grafana-ui/src/components/Input/AutoSizeInput.tsx
@@ -32,19 +32,17 @@ export const AutoSizeInput = React.forwardRef((props, r
}}
width={inputWidth}
onBlur={(event) => {
- if (onCommitChange) {
- onCommitChange(event);
- }
if (onBlur) {
onBlur(event);
+ } else if (onCommitChange) {
+ onCommitChange(event);
}
}}
onKeyDown={(event) => {
- if (event.key === 'Enter' && onCommitChange) {
- onCommitChange(event);
- }
if (onKeyDown) {
onKeyDown(event);
+ } else if (event.key === 'Enter' && onCommitChange) {
+ onCommitChange(event);
}
}}
data-testid={'autosize-input'}
diff --git a/public/app/plugins/datasource/loki/querybuilder/operations.ts b/public/app/plugins/datasource/loki/querybuilder/operations.ts
index b0c7f481406..31cf3aca86c 100644
--- a/public/app/plugins/datasource/loki/querybuilder/operations.ts
+++ b/public/app/plugins/datasource/loki/querybuilder/operations.ts
@@ -202,6 +202,7 @@ export function getOperationDefinitions(): QueryBuilderOperationDef[] {
placeholder: 'Text to find',
description: 'Find log lines that contains this text',
minWidth: 20,
+ runQueryOnEnter: true,
},
],
defaultParams: [''],
@@ -223,6 +224,7 @@ export function getOperationDefinitions(): QueryBuilderOperationDef[] {
placeholder: 'Text to exclude',
description: 'Find log lines that does not contain this text',
minWidth: 26,
+ runQueryOnEnter: true,
},
],
defaultParams: [''],
@@ -244,6 +246,7 @@ export function getOperationDefinitions(): QueryBuilderOperationDef[] {
placeholder: 'Pattern to match',
description: 'Find log lines that match this regex pattern',
minWidth: 30,
+ runQueryOnEnter: true,
},
],
defaultParams: [''],
@@ -265,6 +268,7 @@ export function getOperationDefinitions(): QueryBuilderOperationDef[] {
placeholder: 'Pattern to exclude',
description: 'Find log lines that does not match this regex pattern',
minWidth: 30,
+ runQueryOnEnter: true,
},
],
defaultParams: [''],
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationParamEditor.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationParamEditor.tsx
index 2ad1e5e6005..47a03ac5d48 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationParamEditor.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationParamEditor.tsx
@@ -38,6 +38,9 @@ function SimpleInputParamEditor(props: QueryBuilderOperationParamEditorProps) {
title={props.paramDef.description}
onCommitChange={(evt) => {
props.onChange(props.index, evt.currentTarget.value);
+ if (props.paramDef.runQueryOnEnter && evt.type === 'keydown') {
+ props.onRunQuery();
+ }
}}
/>
);
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/types.ts b/public/app/plugins/datasource/prometheus/querybuilder/shared/types.ts
index 1b79b22a5a3..8839158c50f 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/types.ts
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/types.ts
@@ -70,6 +70,7 @@ export interface QueryBuilderOperationParamDef {
description?: string;
minWidth?: number;
editor?: ComponentType;
+ runQueryOnEnter?: boolean;
}
export interface QueryBuilderOperationEditorProps {