diff --git a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilter.test.tsx b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilter.test.tsx
index e4ec734453e..72cf5ade437 100644
--- a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilter.test.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilter.test.tsx
@@ -44,6 +44,7 @@ describe('MultiFilters', () => {
render();
userEvent.click(screen.getByLabelText('Add'));
+
await waitFor(() => {
const filterItemElement = screen.getByTestId('cloudwatch-multifilter-item');
expect(filterItemElement).toBeInTheDocument();
@@ -52,11 +53,12 @@ describe('MultiFilters', () => {
const keyElement = screen.getByTestId('cloudwatch-multifilter-item-key');
expect(keyElement).toBeInTheDocument();
userEvent.type(keyElement!, 'my-key');
+ fireEvent.blur(keyElement!);
await waitFor(() => {
expect(screen.getByDisplayValue('my-key')).toBeInTheDocument();
+ expect(onChange).not.toHaveBeenCalled();
});
- expect(onChange).not.toHaveBeenCalled();
});
});
@@ -68,25 +70,27 @@ describe('MultiFilters', () => {
const label = await screen.findByLabelText('Add');
userEvent.click(label);
- await waitFor(() => {
- const filterItemElement = screen.getByTestId('cloudwatch-multifilter-item');
- expect(filterItemElement).toBeInTheDocument();
- });
+ const filterItemElement = await screen.findByTestId('cloudwatch-multifilter-item');
+ expect(filterItemElement).toBeInTheDocument();
const keyElement = screen.getByTestId('cloudwatch-multifilter-item-key');
expect(keyElement).toBeInTheDocument();
userEvent.type(keyElement!, 'my-key');
fireEvent.blur(keyElement!);
- expect(screen.getByDisplayValue('my-key')).toBeInTheDocument();
- expect(onChange).not.toHaveBeenCalled();
+ await waitFor(() => {
+ expect(screen.getByDisplayValue('my-key')).toBeInTheDocument();
+ expect(onChange).not.toHaveBeenCalled();
+ });
const valueElement = screen.getByTestId('cloudwatch-multifilter-item-value');
expect(valueElement).toBeInTheDocument();
userEvent.type(valueElement!, 'my-value1,my-value2');
fireEvent.blur(valueElement!);
- expect(screen.getByDisplayValue('my-value1,my-value2')).toBeInTheDocument();
- expect(onChange).toHaveBeenCalledWith({
- 'my-key': ['my-value1', 'my-value2'],
+ await waitFor(() => {
+ expect(screen.getByDisplayValue('my-value1, my-value2')).toBeInTheDocument();
+ expect(onChange).toHaveBeenCalledWith({
+ 'my-key': ['my-value1', 'my-value2'],
+ });
});
});
});
@@ -108,9 +112,9 @@ describe('MultiFilters', () => {
await waitFor(() => {
expect(within(filterItemElement).getByDisplayValue('my-key2')).toBeInTheDocument();
- });
- expect(onChange).toHaveBeenCalledWith({
- 'my-key2': ['my-value'],
+ expect(onChange).toHaveBeenCalledWith({
+ 'my-key2': ['my-value'],
+ });
});
});
});
diff --git a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilterItem.tsx b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilterItem.tsx
index 8eb34996eeb..f305e383602 100644
--- a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilterItem.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilterItem.tsx
@@ -47,6 +47,7 @@ export const MultiFilterItem: FunctionComponent = ({ filter, onChange, on
if (localValue && newValues !== filter.value) {
onChange({ ...filter, value: newValues });
}
+ setLocalValue(newValues.join(', '));
}}
/>
diff --git a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.test.tsx b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.test.tsx
index ea4995555c8..2c38a561807 100644
--- a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.test.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.test.tsx
@@ -192,6 +192,7 @@ describe('VariableEditor', () => {
userEvent.type(valueElement!, ',baz');
fireEvent.blur(valueElement!);
+ expect(screen.getByDisplayValue('foo, bar, baz')).toBeInTheDocument();
await waitFor(() => {
expect(onChange).toHaveBeenCalledWith({
...defaultQuery,