Fix search bar disappearing when no products match query

app/javascript/components/ProductsDashboardPage.tsx

@@ -36,6 +36,7 @@ export const ProductsDashboardPage = ({
 }: ProductsDashboardPageProps) => {
   const [enableArchiveTab, setEnableArchiveTab] = React.useState(archivedProductsCount > 0);
   const [query, setQuery] = React.useState("");
+  const hadInitialItems = React.useRef(products.length > 0 || memberships.length > 0);
 
   return (
     <ProductsLayout
@@ -44,19 +45,21 @@ export const ProductsDashboardPage = ({
       archivedTabVisible={enableArchiveTab}
       ctaButton={
         <>
-          {products.length > 0 ? <Search value={query} onSearch={setQuery} placeholder="Search products" /> : null}
+          {hadInitialItems.current || !!query ? (
+            <Search value={query} onSearch={setQuery} placeholder="Search products" />
+          ) : null}
           <NavigationButtonInertia href={Routes.new_product_path()} disabled={!canCreateProduct} color="accent">
             New product
           </NavigationButtonInertia>
         </>
       }
     >
       <section className="p-4 md:p-8">
-        {memberships.length === 0 && products.length === 0 ? (
+        {memberships.length === 0 && products.length === 0 && !hadInitialItems.current ? (
           <Placeholder>
             <PlaceholderImage src={placeholder} />
-            <h2>We’ve never met an idea we didn’t like.</h2>
-            <p>Your first product doesn’t need to be perfect. Just put it out there, and see if it sticks.</p>
+            <h2>We've never met an idea we didn't like.</h2>
+            <p>Your first product doesn't need to be perfect. Just put it out there, and see if it sticks.</p>
             <div>
               <NavigationButtonInertia href={Routes.new_product_path()} disabled={!canCreateProduct} color="accent">
                 New product

app/javascript/components/ProductsPage.tsx

@@ -28,30 +28,35 @@ const ProductsPage = ({
   query: string | null;
   setEnableArchiveTab?: (enable: boolean) => void;
   type?: Tab;
-}) => (
-  <div className="grid gap-12">
-    {memberships.length > 0 ? (
-      <ProductsPageMembershipsTable
-        query={query}
-        entries={memberships}
-        pagination={membershipsPagination}
-        sort={membershipsSort}
-        selectedTab={type}
-        setEnableArchiveTab={setEnableArchiveTab}
-      />
-    ) : null}
+}) => {
+  const hadInitialMemberships = React.useRef(memberships.length > 0);
+  const hadInitialProducts = React.useRef(products.length > 0);
 
-    {products.length > 0 ? (
-      <ProductsPageProductsTable
-        query={query}
-        entries={products}
-        pagination={productsPagination}
-        sort={productsSort}
-        selectedTab={type}
-        setEnableArchiveTab={setEnableArchiveTab}
-      />
-    ) : null}
-  </div>
-);
+  return (
+    <div className="grid gap-12">
+      {hadInitialMemberships.current ? (
+        <ProductsPageMembershipsTable
+          query={query}
+          entries={memberships}
+          pagination={membershipsPagination}
+          sort={membershipsSort}
+          selectedTab={type}
+          setEnableArchiveTab={setEnableArchiveTab}
+        />
+      ) : null}
+
+      {hadInitialProducts.current ? (
+        <ProductsPageProductsTable
+          query={query}
+          entries={products}
+          pagination={productsPagination}
+          sort={productsSort}
+          selectedTab={type}
+          setEnableArchiveTab={setEnableArchiveTab}
+        />
+      ) : null}
+    </div>
+  );
+};
 
 export default ProductsPage;

spec/requests/products/index_spec.rb

@@ -577,6 +577,25 @@ def find_product_row(product, hover: false)
       end
       expect(page).to have_alert(text: "Product deleted!")
     end
+
+    it "keeps the search bar visible when no products match" do
+      product = create(:product, user: seller, name: "Digital Art Pack")
+      visit(products_path)
+
+      select_disclosure "Toggle Search" do
+        expect(page).to have_field("Search products")
+      end
+      fill_in "Search products", with: "nonexistentproduct"
+      wait_for_ajax
+
+      expect(page).to have_field("Search products")
+      expect(page).not_to have_content("Digital Art Pack")
+
+      fill_in "Search products", with: ""
+      wait_for_ajax
+
+      expect(page).to have_content("Digital Art Pack")
+    end
   end
 
   describe "dashboard stats" do