Fix search input value on navigation

src/components/shell/layout/index.js

@@ -30,6 +30,7 @@ import * as S from './styles'
 const history = createBrowserHistory()
 
 const Layout = ({ toggleLightSwitch, ...props }) => {
+  const searchInputRef = useRef(null)
   const sideSheetRef = useRef(null)
   const allKerbs = useRef([])
   const [kerbs, setKerbs] = useState([])
@@ -45,6 +46,10 @@ const Layout = ({ toggleLightSwitch, ...props }) => {
   }
 
   const handleNavbarItemClick = itemId => {
+    if (searchInputRef.current) {
+      searchInputRef.current.value = ''
+    }
+
     setActiveItem(itemId)
     setKerbs(
       itemId === '__DASHBOARD__'
@@ -179,7 +184,7 @@ const Layout = ({ toggleLightSwitch, ...props }) => {
                 <S.SideSheetButton onClick={toggleSideSheet}>
                   <FiMenu />
                 </S.SideSheetButton>
-                <Search onChange={handleSearch} />
+                <Search ref={searchInputRef} onChange={handleSearch} />
                 <LightSwitch light={lightContext} onClick={toggleLightSwitch} />
               </S.Header>
               <Widgets widgets={kerbs} />

src/components/shell/search/index.js

@@ -1,23 +1,24 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { FiSearch } from 'react-icons/fi'
 
 import * as S from './styles'
 
-const Search = ({ onChange, ...props }) => {
+const Search = forwardRef(({ onChange, ...props }, ref) => {
   return (
     <S.Label {...props}>
       <S.InputWrapper>
         <FiSearch />
         <S.StyledInput
+          ref={ref}
           onChange={onChange}
           type="search"
           placeholder="Search..."
         />
       </S.InputWrapper>
     </S.Label>
   )
-}
+})
 
 Search.propTypes = {
   onChange: PropTypes.func.isRequired