From 174ba75df8477482e1467c59c824efe82ce4f52f Mon Sep 17 00:00:00 2001
From: Kristof Csillag <kristof@oasisprotocol.org>
Date: Wed, 5 Jul 2023 23:39:41 +0200
Subject: [PATCH] Keep showing search suggestions even if there is an error
 message

---
 src/app/components/Search/index.tsx | 62 ++++++++++++++---------------
 1 file changed, 29 insertions(+), 33 deletions(-)

diff --git a/src/app/components/Search/index.tsx b/src/app/components/Search/index.tsx
index 63f9de34ab..8f74a6a93a 100644
--- a/src/app/components/Search/index.tsx
+++ b/src/app/components/Search/index.tsx
@@ -156,14 +156,6 @@ const SearchCmp: FC<SearchProps> = ({ scope, variant, disabled, onFocusChange: o
       aria-label={searchPlaceholderTranslated}
     >
       <TextField
-        sx={
-          hasError
-            ? {
-                background: COLORS.linen,
-                borderWidth: 1,
-              }
-            : {}
-        }
         value={value}
         onChange={e => onChange(e.target.value)}
         error={hasError}
@@ -201,32 +193,36 @@ const SearchCmp: FC<SearchProps> = ({ scope, variant, disabled, onFocusChange: o
         }}
         helperText={
           value &&
-          value !== valueInSearchParams &&
-          (isTooShort ? (
-            <span>
-              <Typography
-                component="span"
-                sx={{
-                  display: 'inline-flex',
-                  color: COLORS.errorIndicatorBackground,
-                  fontSize: 12,
-                  alignItems: 'center',
-                  verticalAlign: 'middle',
+          value !== valueInSearchParams && (
+            <div>
+              {isTooShort && (
+                <>
+                  <Typography
+                    component="span"
+                    sx={{
+                      display: 'inline-flex',
+                      color: COLORS.errorIndicatorBackground,
+                      fontSize: 12,
+                      alignItems: 'center',
+                      verticalAlign: 'middle',
+                      mb: 3,
+                    }}
+                  >
+                    <ErrorIcon />
+                    &nbsp;
+                    {t('search.error.tooShort')}
+                  </Typography>
+                  <br />
+                </>
+              )}
+              <SearchSuggestionsButtons
+                scope={scope}
+                onClickSuggestion={suggestion => {
+                  setValue(suggestion)
                 }}
-              >
-                <ErrorIcon />
-                &nbsp;
-                {t('search.error.tooShort')}
-              </Typography>
-            </span>
-          ) : (
-            <SearchSuggestionsButtons
-              scope={scope}
-              onClickSuggestion={suggestion => {
-                setValue(suggestion)
-              }}
-            />
-          ))
+              />
+            </div>
+          )
         }
       />
     </SearchForm>