From c18d0f6c131aab8972b24d6b37a5496661adea59 Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Thu, 8 Aug 2024 15:46:17 +0200
Subject: [PATCH] refactor: use search submit and clean events, instead of
 change

---
 src/pages/home/index.tsx | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index d728a78..b6a801b 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -149,14 +149,27 @@ export const HomePage = () => {
           />
         </div>
         <div className={styles.actionButtons}>
-          <div className={styles.search}>
+          <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"
-              value={search}
-              onChange={(e) => {
-                setSearch(e.currentTarget.value)
-              }}
               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}>