From ec6d36d89823caa56536734bea78c18df2aef260 Mon Sep 17 00:00:00 2001
From: soniaklimas <57659625+soniaklimas@users.noreply.github.com>
Date: Thu, 3 Oct 2024 14:28:41 +0200
Subject: [PATCH] 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
---
 apps/storefront/src/components/header/mobile-search.tsx | 6 +++++-
 apps/storefront/src/components/header/search-form.tsx   | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/storefront/src/components/header/mobile-search.tsx b/apps/storefront/src/components/header/mobile-search.tsx
index c5eae07..2e99907 100644
--- 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
index be41fd9..ea7ef7f 100644
--- 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;
     }