diff --git a/ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.js b/ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.js index 3c56f6eea..5e68967ac 100644 --- a/ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.js +++ b/ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.js @@ -57,12 +57,15 @@ const LabelValueInput = observer( onChange = action((newValue, actionMeta) => { const { matcher } = this.props; - matcher.values = newValue; + // we might get null if there's nothing selected + const value = newValue || []; + + matcher.values = value; // force regex if we have multiple values - if (newValue.length > 1 && matcher.isRegex === false) { + if (value.length > 1 && matcher.isRegex === false) { matcher.isRegex = true; - } else if (newValue.length === 1 && matcher.isRegex === true) { + } else if (value.length === 1 && matcher.isRegex === true) { matcher.isRegex = false; } }); diff --git a/ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.test.js b/ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.test.js index a0a58797d..5a15542d6 100644 --- a/ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.test.js +++ b/ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.test.js @@ -125,4 +125,19 @@ describe("", () => { options.at(1).simulate("click"); expect(matcher.isRegex).toBe(true); }); + + it("removing last value sets matcher.values to []", () => { + matcher.values = [MatcherValueToObject("foo"), MatcherValueToObject("bar")]; + const tree = MountedLabelValueInput(true); + + tree + .find(".react-select__multi-value__remove") + .at(0) + .simulate("click"); + expect(matcher.values).toHaveLength(1); + + tree.find(".react-select__multi-value__remove").simulate("click"); + expect(matcher.values).toHaveLength(0); + expect(matcher.values).toEqual([]); + }); });