Fix clear button condition in FilterInput.

ui/shared/FilterInput.tsx

@@ -15,6 +15,7 @@ type Props = {
 const FilterInput = ({ onChange, className, size = 'sm', placeholder }: Props) => {
   const [ filterQuery, setFilterQuery ] = useState('');
   const inputRef = React.useRef<HTMLInputElement>(null);
+  const iconColor = useColorModeValue('blackAlpha.600', 'whiteAlpha.600');
 
   const handleFilterQueryChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
     const { value } = event.target;
@@ -37,7 +38,7 @@ const FilterInput = ({ onChange, className, size = 'sm', placeholder }: Props) =
       <InputLeftElement
         pointerEvents="none"
       >
-        <Icon as={ searchIcon } color={ useColorModeValue('blackAlpha.600', 'whiteAlpha.600') }/>
+        <Icon as={ searchIcon } color={ iconColor }/>
       </InputLeftElement>
 
       <Input
@@ -50,18 +51,20 @@ const FilterInput = ({ onChange, className, size = 'sm', placeholder }: Props) =
         textOverflow="ellipsis"
       />
 
-      <InputRightElement>
-        <IconButton
-          colorScheme="gray"
-          aria-label="Clear the filter input"
-          title="Clear the filter input"
-          w={ 6 }
-          h={ 6 }
-          icon={ <Icon as={ crossIcon } w={ 4 } h={ 4 } color={ useColorModeValue('blackAlpha.600', 'whiteAlpha.600') }/> }
-          size="sm"
-          onClick={ handleFilterQueryClear }
-        />
-      </InputRightElement>
+      { filterQuery ? (
+        <InputRightElement>
+          <IconButton
+            colorScheme="gray"
+            aria-label="Clear the filter input"
+            title="Clear the filter input"
+            w={ 6 }
+            h={ 6 }
+            icon={ <Icon as={ crossIcon } w={ 4 } h={ 4 } color={ iconColor }/> }
+            size="sm"
+            onClick={ handleFilterQueryClear }
+          />
+        </InputRightElement>
+      ) : null }
     </InputGroup>
   );
 };