fix text box text (#1951)

frontends/main/src/app-pages/ChannelPage/ChannelSearch.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from "react"
+import React, { useCallback, useMemo, useEffect } from "react"
 import { ChannelTypeEnum } from "api/v0"
 import { useOfferorsList } from "api/hooks/learningResources"
 import { useResourceSearchParams } from "@mitodl/course-search-utils"
@@ -95,6 +95,10 @@ const ChannelSearch: React.FC<ChannelSearchProps> = ({
   })
   const page = +(searchParams.get("page") ?? "1")
 
+  useEffect(() => {
+    setCurrentText(params.q ?? "")
+  }, [params, setCurrentText])
+
   return (
     <section>
       <VisuallyHidden as="h2">Search within {channelTitle}</VisuallyHidden>

frontends/main/src/app-pages/SearchPage/SearchPage.test.tsx

@@ -15,6 +15,7 @@ import type {
 import invariant from "tiny-invariant"
 import { Permission } from "api/hooks/user"
 import { assertHeadings, ControlledPromise } from "ol-test-utilities"
+import { act } from "@testing-library/react"
 
 const DEFAULT_SEARCH_RESPONSE: LearningResourcesSearchResponse = {
   count: 0,
@@ -224,6 +225,7 @@ describe("SearchPage", () => {
     expect(queryInput.value).toBe("meow")
     await user.clear(queryInput)
     await user.paste("woof")
+
     expect(location.current.search).toBe(initialQuery)
     await user.click(screen.getByRole("button", { name: "Search" }))
     expect(location.current.search).toBe(finalQuery)
@@ -796,3 +798,45 @@ test("Count changes are announced to screen readers", async () => {
     expect(count).toHaveTextContent("456 results")
   })
 })
+
+test("routing to new query sets currentText", async () => {
+  setMockApiResponses({})
+  renderWithProviders(<SearchPage />)
+  act(() => {
+    window.history.pushState({}, "", "?q=meow")
+  })
+
+  await waitFor(() => {
+    const textInput = screen.getByRole("textbox", { name: "Search for" })
+    expect(textInput).toHaveValue("meow")
+  })
+})
+
+test("changing a facet resets unsubmitted text", async () => {
+  setMockApiResponses({
+    search: {},
+  })
+  renderWithProviders(<SearchPage />)
+
+  const queryInput = await screen.findByRole<HTMLInputElement>("textbox", {
+    name: "Search for",
+  })
+  await user.clear(queryInput)
+  await user.paste("woof")
+
+  const textInput = screen.getByRole("textbox", { name: "Search for" })
+
+  await waitFor(() => {
+    expect(textInput).toHaveValue("woof")
+  })
+
+  const facets = screen.getByTestId("facets-container")
+  const professionalToggle = await within(facets).findByRole("button", {
+    name: "Professional",
+  })
+  await user.click(professionalToggle)
+
+  await waitFor(() => {
+    expect(textInput).toHaveValue("")
+  })
+})

frontends/main/src/app-pages/SearchPage/SearchPage.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { keyBy } from "lodash"
-import React, { useCallback, useMemo } from "react"
+import React, { useCallback, useMemo, useEffect } from "react"
 import type { FacetManifest } from "@mitodl/course-search-utils"
 import { useSearchParams } from "@mitodl/course-search-utils/next"
 import { useResourceSearchParams } from "@mitodl/course-search-utils"
@@ -93,6 +93,7 @@ const SearchPage: React.FC = () => {
     },
     [setSearchParams],
   )
+
   const onFacetsChange = useCallback(() => {
     setPage(1)
   }, [setPage])
@@ -115,6 +116,10 @@ const SearchPage: React.FC = () => {
 
   const page = +(searchParams.get("page") ?? "1")
 
+  useEffect(() => {
+    setCurrentText(params.q ?? "")
+  }, [params, setCurrentText])
+
   return (
     <Page>
       <LearningResourceDrawer />