refactor: use search submit and clean events, instead of change

src/pages/home/index.tsx

@@ -149,14 +149,27 @@ export const HomePage = () => {
           />
         </div>
         <div className={styles.actionButtons}>
-          <div className={styles.search}>
-            <TextField
-              placeholder="Search"
-              value={search}
-              onChange={(e) => {
-                setSearch(e.currentTarget.value)
+          <form
+            className={styles.search}
+            onSubmit={(e) => {
+              e.preventDefault()
+              const searchInput = e.currentTarget.elements.namedItem(
+                'q'
+              ) as HTMLInputElement
+              setSearch(searchInput.value)
             }}
+          >
+            <TextField
+              name="q"
+              placeholder="Search"
               size="small"
+              type="search"
+              onChange={(e) => {
+                // Handle the case when users click native search input's clear or x
+                if (e.currentTarget.value === '') {
+                  setSearch(e.currentTarget.value)
+                }
+              }}
               sx={{
                 width: '100%',
                 fontSize: '16px',
@@ -175,6 +188,7 @@ export const HomePage = () => {
               }}
             />
             <Button
+              type="submit"
               sx={{
                 minWidth: '44px',
                 padding: '11.5px 12px',
@@ -185,7 +199,7 @@ export const HomePage = () => {
             >
               <FontAwesomeIcon icon={faSearch} />
             </Button>
-          </div>
+          </form>
         </div>
       </div>
       <div className={styles.dropzone} onClick={handleUploadClick}>