🐛 update UI interaction

Author: treasurechic

components/LaunchPad/Sale/CreateTokenSale.tsx

@@ -14,7 +14,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import React, { useContext, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import { CreatorAddress } from '../CreatorAddress'
 import { Note } from '../note'
 
@@ -68,9 +68,7 @@ export const CreateTokenSale = () => {
     setFormData({ ...formData, [e.target.name]: e.target.value })
   }
 
-  const onSearchAsset = (e) => {
-    const searchValue = e.target.value
-    setFormData({ ...formData, [e.target.name]: searchValue })
+  const fetchUserAssets = () => {
     setAssetList([
       {
         assetId: 7789624,
@@ -121,18 +119,19 @@ export const CreateTokenSale = () => {
         createdAt: new Date().toLocaleString()
       }
     ])
-    setShowTable(true)
   }
 
+  useEffect(() => {
+    fetchUserAssets()
+  }, [])
+
   const onSubmit = async (e) => {
     e.preventDefault()
 
     setLoading(true)
     setLoading(false)
   }
 
-
-
   return (
     <>
       <Typography variant="subtitle1" sx={styles.title}>
@@ -167,10 +166,16 @@ export const CreateTokenSale = () => {
               placeholder="ASA Asset ID"
               name="assetId"
               value={assetId}
-              onChange={(e) => onSearchAsset(e)}
+              onChange={(e) => onChange(e)}
+              onFocus={() => setShowTable(true)}
               sx={styles.input}
             />
-            <SearchTable columns={columns} rowData={assetList} showTable={showTable} />
+            <SearchTable
+              columns={columns}
+              rowData={assetList}
+              showTable={showTable}
+              setShowTable={setShowTable}
+            />
           </Box>
         </Box>
 

components/LaunchPad/Sale/SearchTable.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 
 //MUI components
 import Paper from '@mui/material/Paper'
@@ -40,12 +40,15 @@ type columnType = {
 export const SearchTable = ({
   columns,
   rowData,
-  showTable
+  showTable,
+  setShowTable
 }: {
   columns: Array<columnType>
   rowData: Array<unknown>
   showTable: boolean
+  setShowTable: (v: boolean) => void
 }) => {
+  const dropdownRef = useRef(null)
   const [order, setOrder] = useState<'asc' | 'desc'>('desc')
   const [orderBy, setOrderBy] = useState('assetName')
 
@@ -63,6 +66,20 @@ export const SearchTable = ({
     }
   }, [rowData, order, orderBy])
 
+  const handleClickOutside = (event) => {
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      setShowTable(false)
+    }
+  }
+
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside, true)
+    return () => {
+      document.removeEventListener('click', handleClickOutside, true)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   if (rowData.length === 0 || !showTable) {
     return null
   }