feat: focus searchbox input after clearing canonical#775

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();
+  });
 });

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();
       }
     };