fix: Close search form after submitting (#23)

* fix: Improve search experience (#18) * fix: Improve search experience * Search on icon click * Add margin top to header when items in bag * Use cn * fix: Close search form after submitting * Make onSubmit optional
mirumee · Oct 3, 2024 · a1f1afd · a1f1afd
1 parent ca27f5b
commit a1f1afd
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 11 deletions.
diff --git a/apps/storefront/src/components/header/mobile-search.tsx b/apps/storefront/src/components/header/mobile-search.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Search } from "lucide-react";
-import { useParams, usePathname } from "next/navigation";
+import { usePathname } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
 
@@ -14,12 +14,15 @@ export const MobileSearch = () => {
   const t = useTranslations("search");
 
   const pathname = usePathname();
-  const params = useParams();
   const [isOpen, setIsOpen] = useState(false);
 
+  const handleCloseSheet = () => {
+    setIsOpen(false);
+  };
+
   useEffect(() => {
     setIsOpen(false);
-  }, [pathname, params]);
+  }, [pathname]);
 
   return (
     <>
@@ -38,8 +41,8 @@ export const MobileSearch = () => {
         aria-label={t("search-label")}
         modal={true}
       >
-        <SheetContent side="top">
-          <SearchForm />
+        <SheetContent side="top" closeClassName="right-2 top-2">
+          <SearchForm onSubmit={handleCloseSheet} />
         </SheetContent>
       </Sheet>
     </>

diff --git a/apps/storefront/src/components/header/mobile-side-menu.tsx b/apps/storefront/src/components/header/mobile-side-menu.tsx
@@ -13,6 +13,7 @@ import { Sheet, SheetContent } from "@nimara/ui/components/sheet";
 
 import { MobileNavigation } from "@/components/mobile-navigation";
 import { paths } from "@/lib/paths";
+import { cn } from "@/lib/utils";
 import { useCurrentRegion } from "@/regions/client";
 
 import { LocaleSwitch } from "../locale-switch";
@@ -57,7 +58,14 @@ export const MobileSideMenu = ({
         <SheetContent side="left" className="w-screen sm:w-1/2">
           <div className="relative flex h-full flex-col justify-between gap-4 overflow-auto">
             <div className="flex h-full flex-col">
-              <div className="flex w-full items-center justify-between gap-4 pb-4 sm:hidden">
+              <div
+                className={cn(
+                  "flex w-full items-center justify-between gap-4 pb-4 sm:hidden",
+                  {
+                    "mt-2": checkoutLinesCount,
+                  },
+                )}
+              >
                 <Logo />
                 <div className="flex justify-end gap-1 align-middle">
                   <MobileSearch />

diff --git a/apps/storefront/src/components/header/search-form.tsx b/apps/storefront/src/components/header/search-form.tsx
@@ -54,7 +54,7 @@ const initialSearchState: SearchState = {
   showOptions: false,
 };
 
-export const SearchForm = () => {
+export const SearchForm = ({ onSubmit }: { onSubmit?: () => void }) => {
   const ts = useTranslations("search");
   const tc = useTranslations("common");
 
@@ -85,6 +85,9 @@ export const SearchForm = () => {
     if (event.code === keyboardCodes.Enter) {
       event.preventDefault();
       resetSearchState();
+      if (onSubmit) {
+        onSubmit();
+      }
 
       // Handle query search
       if (isNoOptionHighlighted || isLastOptionHighlighted) {
@@ -127,6 +130,15 @@ export const SearchForm = () => {
     }
   };
 
+  const handleSearchIconClick = () => {
+    if (isNoOptionHighlighted || isLastOptionHighlighted) {
+      router.push(paths.search.asPath({ query: { q: inputValue } }));
+      resetSearchState();
+
+      return;
+    }
+  };
+
   useClickAnyWhere(() =>
     setSearchState((prevState) => ({ ...prevState, showOptions: false })),
   );
@@ -173,7 +185,8 @@ export const SearchForm = () => {
               size="icon"
               type="submit"
               variant="outline"
-              onClick={() => resetSearchState()}
+              className="cursor-pointer"
+              onClick={handleSearchIconClick}
             >
               {isLoading ? (
                 <Spinner size={16} />

diff --git a/packages/ui/src/components/sheet.tsx b/packages/ui/src/components/sheet.tsx
@@ -54,12 +54,14 @@ const sheetVariants = cva(
 
 interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
+    VariantProps<typeof sheetVariants> {
+  closeClassName?: string;
+}
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
   SheetContentProps
->(({ side = "right", className, children, ...props }, ref) => (
+>(({ side = "right", className, closeClassName, children, ...props }, ref) => (
   <SheetPortal>
     <SheetOverlay />
     <SheetPrimitive.Content
@@ -68,7 +70,12 @@ const SheetContent = React.forwardRef<
       {...props}
     >
       {children}
-      <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+      <SheetPrimitive.Close
+        className={cn(
+          "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none",
+          closeClassName,
+        )}
+      >
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>