clear button

ui/pages/SearchResults.tsx

@@ -109,6 +109,11 @@ const SearchResultsPageContent = () => {
     inputRef.current?.querySelector('input')?.blur();
   }, [ ]);
 
+  const handleClear = React.useCallback(() => {
+    handleSearchTermChange('');
+    inputRef.current?.querySelector('input')?.focus();
+  }, [ handleSearchTermChange ]);
+
   const renderSearchBar = React.useCallback(() => {
     return (
       <SearchBarInput
@@ -117,9 +122,10 @@ const SearchResultsPageContent = () => {
         onSubmit={ handleSubmit }
         value={ searchTerm }
         onHide={ handelHide }
+        onClear={ handleClear }
       />
     );
-  }, [ handleSearchTermChange, handleSubmit, searchTerm, handelHide ]);
+  }, [ handleSearchTermChange, handleSubmit, searchTerm, handelHide, handleClear ]);
 
   const renderHeader = React.useCallback(() => {
     return <Header renderSearchBar={ renderSearchBar }/>;

ui/shared/InputClearButton.tsx

@@ -5,18 +5,20 @@ import crossIcon from 'icons/cross.svg';
 
 interface Props {
   onClick: () => void;
+  className?: string;
 }
 
-const InputClearButton = ({ onClick }: Props) => {
+const InputClearButton = ({ onClick, className }: Props) => {
   const iconColor = useColorModeValue('blackAlpha.600', 'whiteAlpha.600');
 
   return (
     <IconButton
+      className={ className }
       colorScheme="gray"
       aria-label="Clear input"
       title="Clear input"
       boxSize={ 6 }
-      icon={ <Icon as={ crossIcon } boxSize={ 4 } color={ iconColor }/> }
+      icon={ <Icon as={ crossIcon } boxSize={ 4 } color={ iconColor } focusable={ false }/> }
       size="sm"
       onClick={ onClick }
     />

ui/snippets/searchBar/SearchBar.tsx

@@ -42,11 +42,17 @@ const SearchBar = ({ isHomepage }: Props) => {
 
   const handleBlur = React.useCallback((event: FocusEvent<HTMLFormElement>) => {
     const isFocusInMenu = menuRef.current?.contains(event.relatedTarget);
-    if (!isFocusInMenu) {
+    const isFocusInInput = inputRef.current?.contains(event.relatedTarget);
+    if (!isFocusInMenu && !isFocusInInput) {
       onClose();
     }
   }, [ onClose ]);
 
+  const handleClear = React.useCallback(() => {
+    handleSearchTermChange('');
+    inputRef.current?.querySelector('input')?.focus();
+  }, [ handleSearchTermChange ]);
+
   const menuPaddingX = isMobile && !isHomepage ? 32 : 0;
   const calculateMenuWidth = React.useCallback(() => {
     menuWidth.current = (inputRef.current?.getBoundingClientRect().width || 0) - menuPaddingX;
@@ -85,6 +91,7 @@ const SearchBar = ({ isHomepage }: Props) => {
           onFocus={ handleFocus }
           onBlur={ handleBlur }
           onHide={ handelHide }
+          onClear={ handleClear }
           isHomepage={ isHomepage }
           value={ searchTerm }
         />

ui/snippets/searchBar/SearchBarInput.tsx

-import { InputGroup, Input, InputLeftElement, Icon, chakra, useColorModeValue, forwardRef } from '@chakra-ui/react';
+import { InputGroup, Input, InputLeftElement, Icon, chakra, useColorModeValue, forwardRef, InputRightElement } from '@chakra-ui/react';
 import throttle from 'lodash/throttle';
 import React from 'react';
 import type { ChangeEvent, FormEvent, FocusEvent } from 'react';
@@ -6,18 +6,20 @@ import type { ChangeEvent, FormEvent, FocusEvent } from 'react';
 import searchIcon from 'icons/search.svg';
 import { useScrollDirection } from 'lib/contexts/scrollDirection';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import InputClearButton from 'ui/shared/InputClearButton';
 
 interface Props {
-  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  onChange: (value: string) => void;
   onSubmit: (event: FormEvent<HTMLFormElement>) => void;
   onBlur?: (event: FocusEvent<HTMLFormElement>) => void;
   onFocus?: () => void;
   onHide?: () => void;
+  onClear: () => void;
   isHomepage?: boolean;
   value: string;
 }
 
-const SearchBarInput = ({ onChange, onSubmit, isHomepage, onFocus, onBlur, onHide, value }: Props, ref: React.ForwardedRef<HTMLFormElement>) => {
+const SearchBarInput = ({ onChange, onSubmit, isHomepage, onFocus, onBlur, onHide, onClear, value }: Props, ref: React.ForwardedRef<HTMLFormElement>) => {
   const [ isSticky, setIsSticky ] = React.useState(false);
   const scrollDirection = useScrollDirection();
   const isMobile = useIsMobile();
@@ -30,6 +32,10 @@ const SearchBarInput = ({ onChange, onSubmit, isHomepage, onFocus, onBlur, onHid
     }
   }, [ ]);
 
+  const handleChange = React.useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    onChange(event.target.value);
+  }, [ onChange ]);
+
   React.useEffect(() => {
     if (!isMobile || isHomepage) {
       return;
@@ -85,16 +91,25 @@ const SearchBarInput = ({ onChange, onSubmit, isHomepage, onFocus, onBlur, onHid
           sx={{
             '@media screen and (max-width: 999px)': {
               paddingLeft: isHomepage ? '50px' : '38px',
+              paddingRight: '36px',
+            },
+            '@media screen and (min-width: 1001px)': {
+              paddingRight: '36px',
             },
           }}
           placeholder={ isMobile ? 'Search by addresses / ... ' : 'Search by addresses / transactions / block / token... ' }
-          onChange={ onChange }
+          onChange={ handleChange }
           border={ isHomepage ? 'none' : '2px solid' }
           borderColor={ useColorModeValue('blackAlpha.100', 'whiteAlpha.200') }
           _focusWithin={{ _placeholder: { color: 'gray.300' } }}
           color={ useColorModeValue('black', 'white') }
           value={ value }
         />
+        { value && (
+          <InputRightElement top={{ base: 2, lg: '18px' }} right={ 2 }>
+            <InputClearButton onClick={ onClear }/>
+          </InputRightElement>
+        ) }
       </InputGroup>
     </chakra.form>
   );

ui/snippets/searchBar/useSearchQuery.tsx

 import { useRouter } from 'next/router';
-import type { ChangeEvent } from 'react';
 import React from 'react';
 
 import useDebounce from 'lib/hooks/useDebounce';
@@ -20,10 +19,6 @@ export default function useSearchQuery(isSearchPage = false) {
     options: { enabled: debouncedSearchTerm.trim().length > 0 },
   });
 
-  const handleSearchTermChange = React.useCallback((event: ChangeEvent<HTMLInputElement>) => {
-    setSearchTerm(event.target.value);
-  }, []);
-
   useUpdateValueEffect(() => {
     if (isSearchPage) {
       query.onFilterChange({ q: debouncedSearchTerm });
@@ -33,7 +28,7 @@ export default function useSearchQuery(isSearchPage = false) {
   return {
     searchTerm,
     debouncedSearchTerm,
-    handleSearchTermChange,
+    handleSearchTermChange: setSearchTerm,
     query,
   };
 }