6362 if "enter" is pressed then the page reloads. (#8507)

* added fix

* added tests

* changed logic to prevent default removed previous prop logic

frontend/src/app/SearchInput.test.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+import SearchInput from "../app/testQueue/addToQueue/SearchInput";
+
+describe("SearchInput", () => {
+  const onInputChange = jest.fn();
+
+  it("calls onSearchClick and prevents default when onSearchClick calls e.preventDefault", () => {
+    const preventDefaultSpy = jest.spyOn(Event.prototype, "preventDefault");
+
+    const onSearchClick = jest.fn((e) => {
+      e.preventDefault();
+    });
+
+    render(
+      <SearchInput
+        onInputChange={onInputChange}
+        onSearchClick={onSearchClick}
+        queryString=""
+        placeholder="Search..."
+        showSubmitButton={true}
+      />
+    );
+
+    const button = screen.getByRole("button");
+    fireEvent.click(button);
+
+    expect(onSearchClick).toHaveBeenCalled();
+    expect(preventDefaultSpy).toHaveBeenCalled();
+
+    preventDefaultSpy.mockRestore();
+  });
+});

frontend/src/app/testQueue/addToQueue/AddToQueueSearch.tsx

@@ -175,6 +175,7 @@ const AddToQueueSearchBox = ({
   return (
     <React.Fragment>
       <SearchInput
+        onSearchClick={(e) => e.preventDefault()}
         onInputChange={onInputChange}
         queryString={debounced}
         disabled={!allowQuery}