diff --git a/CHANGELOG.md b/CHANGELOG.md
index 145625c42..e2160c72c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
# Changelog
+## v0.101
+
+### Fixed
+
+- Don't crash on autocomplete errors.
+
## v0.100
### Changed
diff --git a/ui/src/Components/NavBar/FilterInput/index.test.tsx b/ui/src/Components/NavBar/FilterInput/index.test.tsx
index 1ecf0128c..f7c99c866 100644
--- a/ui/src/Components/NavBar/FilterInput/index.test.tsx
+++ b/ui/src/Components/NavBar/FilterInput/index.test.tsx
@@ -181,7 +181,7 @@ describe("", () => {
tree.unmount();
});
- it("highliting a suggestion makes it active", async () => {
+ it("highlighting a suggestion makes it active", async () => {
const tree = MountedInput();
tree.find("input").simulate("change", { target: { value: "cluster" } });
act(() => {
@@ -200,6 +200,25 @@ describe("", () => {
expect(tree.find(".dropdown-item").at(0).html()).toMatch(/active/);
});
+ it("handles invalid regexp values", async () => {
+ const tree = MountedInput();
+ tree.find("input").simulate("change", { target: { value: "foo(" } });
+ act(() => {
+ jest.runOnlyPendingTimers();
+ });
+
+ // suggestions are rendered only when input is focused
+ tree.find("input").simulate("focus");
+ // find() doesn't pick up suggestions even when tree.html() shows them
+ // forcing update seems to solve it
+ // https://github.com/airbnb/enzyme/issues/1233#issuecomment-343449560
+ tree.update();
+
+ tree.find("input").simulate("keydown", { keyCode: 40, key: "ArrowDown" });
+ tree.update();
+ expect(tree.find(".dropdown-item").at(0).html()).toMatch(/active/);
+ });
+
it("clicking on a suggestion adds it to filters", async () => {
const tree = MountedInput();
tree.find("input").simulate("change", { target: { value: "cluster" } });
diff --git a/ui/src/Components/NavBar/FilterInput/index.tsx b/ui/src/Components/NavBar/FilterInput/index.tsx
index fda64e13a..8775108fd 100644
--- a/ui/src/Components/NavBar/FilterInput/index.tsx
+++ b/ui/src/Components/NavBar/FilterInput/index.tsx
@@ -12,6 +12,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSearch } from "@fortawesome/free-solid-svg-icons/faSearch";
import { AlertStore, FormatBackendURI } from "Stores/AlertStore";
+import { EscapeRegex } from "Stores/SilenceFormStore";
import type { Settings } from "Stores/Settings";
import { IsMobile } from "Common/Device";
import { useFetchGet } from "Hooks/useFetchGet";
@@ -182,7 +183,7 @@ const FilterInput: FC<{
{...getItemProps({ item, index })}
>
{item
- .split(new RegExp(`(${inputValue})`, "gi"))
+ .split(new RegExp(`(${EscapeRegex(inputValue)})`, "gi"))
.map((part, i) => (