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 {