From c7bc0f2c9cf1e6ece9a547a29c98a44dc94ebc65 Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Tue, 14 May 2024 09:10:21 +0200
Subject: [PATCH 1/3] Hide clear button when mobile search is collapsed

---
 src/app/components/Search/index.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/app/components/Search/index.tsx b/src/app/components/Search/index.tsx
index 7887208f6..28b4f5b06 100644
--- a/src/app/components/Search/index.tsx
+++ b/src/app/components/Search/index.tsx
@@ -52,6 +52,9 @@ const SearchForm = styled('form', {
               display: 'none',
             },
             [`.${inputAdornmentClasses.positionEnd}`]: {
+              'button[type="button"]': {
+                display: 'none',
+              },
               marginLeft: 0,
             },
           },

From 8c0bf7424324f4a0768774edcd96f22815c6504b Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Tue, 14 May 2024 09:12:00 +0200
Subject: [PATCH 2/3] Submit search form only when value changes

---
 .changelog/1411.bugfix.md           | 1 +
 src/app/components/Search/index.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)
 create mode 100644 .changelog/1411.bugfix.md

diff --git a/.changelog/1411.bugfix.md b/.changelog/1411.bugfix.md
new file mode 100644
index 000000000..d851f9401
--- /dev/null
+++ b/.changelog/1411.bugfix.md
@@ -0,0 +1 @@
+Fix mobile search issues
diff --git a/src/app/components/Search/index.tsx b/src/app/components/Search/index.tsx
index 28b4f5b06..ab577ce83 100644
--- a/src/app/components/Search/index.tsx
+++ b/src/app/components/Search/index.tsx
@@ -142,7 +142,7 @@ const SearchCmp: FC<SearchProps> = ({ scope, variant, disabled, onFocusChange: o
 
   const onFormSubmit = (e?: FormEvent) => {
     e?.preventDefault()
-    if (value) {
+    if (value && value !== valueInSearchParams) {
       navigate(RouteUtils.getSearchRoute(scope, valueWithoutPrefix))
     }
   }

From 3c176e7c9b390a35c14a2af1f515907450dc1e78 Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Thu, 16 May 2024 17:06:37 +0200
Subject: [PATCH 3/3] Hide footer search in mobile homepage

---
 src/app/components/AppendMobileSearch/index.tsx |  4 +++-
 src/app/components/PageLayout/Footer.tsx        | 17 ++++++++++++-----
 src/app/pages/HomePage/index.tsx                |  2 +-
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/app/components/AppendMobileSearch/index.tsx b/src/app/components/AppendMobileSearch/index.tsx
index 0211fc628..97fc780a3 100644
--- a/src/app/components/AppendMobileSearch/index.tsx
+++ b/src/app/components/AppendMobileSearch/index.tsx
@@ -7,6 +7,7 @@ import { SearchScope } from '../../../types/searchScope'
 
 interface AppendMobileSearchProps {
   action?: ReactNode
+  enableMobileSearch?: boolean
 }
 
 interface AppendMobileSearchLayoutProps {
@@ -41,6 +42,7 @@ export const AppendMobileSearch: FC<PropsWithChildren<AppendMobileSearchProps> &
   scope,
   children,
   action,
+  enableMobileSearch = true,
 }) => {
   const { isMobile } = useScreenSize()
 
@@ -50,7 +52,7 @@ export const AppendMobileSearch: FC<PropsWithChildren<AppendMobileSearchProps> &
 
       {action}
 
-      {isMobile && (
+      {isMobile && enableMobileSearch && (
         <SearchWrapper>
           <Search scope={scope} variant="expandable" />
         </SearchWrapper>
diff --git a/src/app/components/PageLayout/Footer.tsx b/src/app/components/PageLayout/Footer.tsx
index 789c67363..348d8570b 100644
--- a/src/app/components/PageLayout/Footer.tsx
+++ b/src/app/components/PageLayout/Footer.tsx
@@ -12,11 +12,13 @@ import { SearchScope } from '../../../types/searchScope'
 import { api, github } from '../../utils/externalLinks'
 import { ReopenAnalyticsConsentButton } from 'app/components/AnalyticsConsent'
 
-const FooterBox = styled(Box)(({ theme }) => ({
+const FooterBox = styled(Box, {
+  shouldForwardProp: prop => prop !== 'enableMobileSearch',
+})<{ enableMobileSearch: boolean }>(({ theme, enableMobileSearch }) => ({
   display: 'flex',
   width: '100%',
   justifyContent: 'space-between',
-  padding: theme.spacing(5, 4),
+  padding: theme.spacing(5, enableMobileSearch ? 4 : 0),
   [theme.breakpoints.up('sm')]: {
     flex: '0 1 100%',
     padding: theme.spacing(5, 0),
@@ -44,9 +46,10 @@ const StyledTypography = styled(Typography)(() => ({
 interface FooterProps {
   scope?: SearchScope
   mobileSearchAction?: ReactNode
+  enableMobileSearch?: boolean
 }
 
-export const Footer: FC<FooterProps> = ({ scope, mobileSearchAction }) => {
+export const Footer: FC<FooterProps> = ({ scope, mobileSearchAction, enableMobileSearch = true }) => {
   const theme = useTheme()
   const { t } = useTranslation()
   const { isMobile, isTablet } = useScreenSize()
@@ -56,9 +59,13 @@ export const Footer: FC<FooterProps> = ({ scope, mobileSearchAction }) => {
 
   return (
     <footer>
-      <FooterBox>
+      <FooterBox enableMobileSearch={enableMobileSearch}>
         {isTablet ? (
-          <AppendMobileSearch scope={scope} action={isMobile && mobileSearchAction}>
+          <AppendMobileSearch
+            scope={scope}
+            action={isMobile && mobileSearchAction}
+            enableMobileSearch={enableMobileSearch}
+          >
             <StyledTypography variant="footer">
               <Box sx={{ whiteSpace: 'nowrap' }}>{t('footer.mobileTitle')} |</Box>
               <Box sx={privacyPolicyLinkStyles}>
diff --git a/src/app/pages/HomePage/index.tsx b/src/app/pages/HomePage/index.tsx
index d2829e432..eab589ecf 100644
--- a/src/app/pages/HomePage/index.tsx
+++ b/src/app/pages/HomePage/index.tsx
@@ -183,7 +183,7 @@ export const HomePage: FC = () => {
         </Content>
 
         <FooterStyled>
-          <Footer />
+          <Footer enableMobileSearch={false} />
         </FooterStyled>
       </HomepageLayout>
     </>