Merge pull request #1411 from oasisprotocol/mz/mobileSearch

Fix mobile search issues

Author: buberdds

.changelog/1411.bugfix.md

@@ -0,0 +1 @@
+Fix mobile search issues

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>

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}>

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,
             },
           },
@@ -139,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))
     }
   }

src/app/pages/HomePage/index.tsx

@@ -183,7 +183,7 @@ export const HomePage: FC = () => {
         </Content>
 
         <FooterStyled>
-          <Footer />
+          <Footer enableMobileSearch={false} />
         </FooterStyled>
       </HomepageLayout>
     </>