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 25, 2024 · ec6d36d · ec6d36d
1 parent 26aa9e6
commit ec6d36d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/apps/storefront/src/components/header/mobile-search.tsx b/apps/storefront/src/components/header/mobile-search.tsx
@@ -16,6 +16,10 @@ export const MobileSearch = () => {
   const pathname = usePathname();
   const [isOpen, setIsOpen] = useState(false);
 
+  const handleCloseSheet = () => {
+    setIsOpen(false);
+  };
+
   useEffect(() => {
     setIsOpen(false);
   }, [pathname]);
@@ -38,7 +42,7 @@ export const MobileSearch = () => {
         modal={true}
       >
         <SheetContent side="top" closeClassName="right-2 top-2">
-          <SearchForm />
+          <SearchForm onSubmit={handleCloseSheet} />
         </SheetContent>
       </Sheet>
     </>

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) {
@@ -130,6 +133,7 @@ export const SearchForm = () => {
   const handleSearchIconClick = () => {
     if (isNoOptionHighlighted || isLastOptionHighlighted) {
       router.push(paths.search.asPath({ query: { q: inputValue } }));
+      resetSearchState();
 
       return;
     }