From cb64daa15ab60d077e428e41b09d05199f7b4cec Mon Sep 17 00:00:00 2001
From: Peter Makowski <peter@makowski.uk>
Date: Tue, 13 Sep 2022 09:13:49 +0200
Subject: [PATCH] feat: focus searchbox input after clearing #775

---
 src/components/SearchBox/SearchBox.test.tsx | 14 +++++++++++++-
 src/components/SearchBox/SearchBox.tsx      |  1 +
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/SearchBox/SearchBox.test.tsx b/src/components/SearchBox/SearchBox.test.tsx
index ce6901331..63556bcbe 100644
--- a/src/components/SearchBox/SearchBox.test.tsx
+++ b/src/components/SearchBox/SearchBox.test.tsx
@@ -1,6 +1,7 @@
 import { shallow, mount } from "enzyme";
 import React from "react";
-
+import userEvent from "@testing-library/user-event";
+import { render, screen } from "@testing-library/react";
 import SearchBox from "./SearchBox";
 
 describe("SearchBox ", () => {
@@ -73,4 +74,15 @@ describe("SearchBox ", () => {
     expect(wrapper.find("input").getDOMNode()).toHaveFocus();
     document.body.removeChild(container);
   });
+
+  it("focuses on the input field after clearing", async () => {
+    render(
+      <SearchBox externallyControlled onChange={jest.fn()} value="admin" />
+    );
+    await userEvent.click(screen.getByLabelText("Search"));
+    await userEvent.click(
+      screen.getByRole("button", { name: "Clear search field" })
+    );
+    expect(screen.getByLabelText("Search")).toHaveFocus();
+  });
 });
diff --git a/src/components/SearchBox/SearchBox.tsx b/src/components/SearchBox/SearchBox.tsx
index 62469dfbb..c2d2a6ea0 100644
--- a/src/components/SearchBox/SearchBox.tsx
+++ b/src/components/SearchBox/SearchBox.tsx
@@ -67,6 +67,7 @@ const SearchBox = React.forwardRef<HTMLInputElement, Props>(
       onChange && onChange("");
       if (internalRef.current) {
         internalRef.current.value = "";
+        internalRef.current.focus();
       }
     };