diff --git a/web/ui/react-app/src/ExpressionInput.test.tsx b/web/ui/react-app/src/ExpressionInput.test.tsx index 66b16f24d..44b992676 100644 --- a/web/ui/react-app/src/ExpressionInput.test.tsx +++ b/web/ui/react-app/src/ExpressionInput.test.tsx @@ -96,11 +96,11 @@ describe('ExpressionInput', () => { }); }); - describe('handleDropdownSelection', () => { + describe('onSelect', () => { it('should call setState with selected value', () => { const instance: any = expressionInput.instance(); const stateSpy = jest.spyOn(instance, 'setState'); - instance.handleDropdownSelection('foo'); + instance.setValue('foo'); expect(stateSpy).toHaveBeenCalledWith({ value: 'foo', height: 'auto' }, expect.anything()); }); }); diff --git a/web/ui/react-app/src/ExpressionInput.tsx b/web/ui/react-app/src/ExpressionInput.tsx index d36020b63..b6fbe39a4 100644 --- a/web/ui/react-app/src/ExpressionInput.tsx +++ b/web/ui/react-app/src/ExpressionInput.tsx @@ -42,19 +42,20 @@ class ExpressionInput extends Component { - this.setState( - { - height: 'auto', - value: this.exprInputRef.current!.value, - }, - this.setHeight - ); + this.setValue(this.exprInputRef.current!.value); }; - handleDropdownSelection = (value: string) => { + setValue = (value: string) => { this.setState({ value, height: 'auto' }, this.setHeight); }; + componentDidUpdate(prevProps: ExpressionInputProps) { + const { value } = this.props; + if (value !== prevProps.value) { + this.setValue(value); + } + } + handleKeyPress = (event: React.KeyboardEvent) => { if (event.key === 'Enter' && !event.shiftKey) { this.executeQuery(); @@ -126,7 +127,7 @@ class ExpressionInput extends Component + {downshift => (
diff --git a/web/ui/react-app/src/Panel.tsx b/web/ui/react-app/src/Panel.tsx index 78d651c31..2c6299ff6 100644 --- a/web/ui/react-app/src/Panel.tsx +++ b/web/ui/react-app/src/Panel.tsx @@ -79,7 +79,8 @@ class Panel extends Component { prevOpts.type !== opts.type || prevOpts.range !== opts.range || prevOpts.endTime !== opts.endTime || - prevOpts.resolution !== opts.resolution + prevOpts.resolution !== opts.resolution || + prevOpts.expr !== opts.expr ) { if (prevOpts.type !== opts.type) { // If the other options change, we still want to show the old data until the new