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,6 +51,7 @@ const FilterInput = ({ onChange, className, size = 'sm', placeholder }: Props) =
         textOverflow="ellipsis"
       />
 
+      { filterQuery ? (
         <InputRightElement>
           <IconButton
             colorScheme="gray"
@@ -57,11 +59,12 @@ const FilterInput = ({ onChange, className, size = 'sm', placeholder }: Props) =
             title="Clear the filter input"
             w={ 6 }
             h={ 6 }
-          icon={ <Icon as={ crossIcon } w={ 4 } h={ 4 } color={ useColorModeValue('blackAlpha.600', 'whiteAlpha.600') }/> }
+            icon={ <Icon as={ crossIcon } w={ 4 } h={ 4 } color={ iconColor }/> }
             size="sm"
             onClick={ handleFilterQueryClear }
           />
         </InputRightElement>
+      ) : null }
     </InputGroup>
   );
 };