Keep showing search suggestions even if there is an error message

oasisprotocol · Jul 5, 2023 · 40074fd · 40074fd
1 parent 86e8cec
commit 40074fd
Showing 1 changed file with 30 additions and 33 deletions.
diff --git 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,37 @@ 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,
+                      background: COLORS.linen,
+                      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>