fix(SearchInput): do not overwrite clear button * 2

cube-js · Mar 23, 2023 · c8b06f1 · c8b06f1
1 parent d9c2ab3
commit c8b06f1
Showing 1 changed file with 13 additions and 10 deletions.
diff --git a/src/components/forms/SearchInput/SearchInput.tsx b/src/components/forms/SearchInput/SearchInput.tsx
@@ -44,6 +44,7 @@ export const SearchInput = forwardRef(function SearchInput(
 
   let state = useSearchFieldState(props);
   let { inputProps, clearButtonProps } = useSearchField(props, state, inputRef);
+  let showClearButton = isClearable && state.value !== '' && !props.isReadOnly;
 
   return (
     <TextInputBase
@@ -55,16 +56,18 @@ export const SearchInput = forwardRef(function SearchInput(
       suffixPosition="after"
       {...props}
       suffix={
-        <>
-          {props.suffix}
-          {isClearable && state.value !== '' && !props.isReadOnly && (
-            <ClearButton
-              type={validationState === 'invalid' ? 'clear' : 'neutral'}
-              theme={validationState === 'invalid' ? 'danger' : undefined}
-              {...ariaToCubeButtonProps(clearButtonProps)}
-            />
-          )}
-        </>
+        props.suffix || showClearButton ? (
+          <>
+            {props.suffix}
+            {showClearButton && (
+              <ClearButton
+                type={validationState === 'invalid' ? 'clear' : 'neutral'}
+                theme={validationState === 'invalid' ? 'danger' : undefined}
+                {...ariaToCubeButtonProps(clearButtonProps)}
+              />
+            )}
+          </>
+        ) : undefined
       }
     />
   );