CG-4370 improve autocomplete (#31)

- made some small changes

Author: doanthanhnguyen95

samples/musicfestival-frontend-react/package.json

@@ -9,7 +9,6 @@
     "@graphql-codegen/typescript": "^2.7.3",
     "@graphql-codegen/typescript-operations": "^2.5.3",
     "@graphql-codegen/typescript-react-query": "^4.0.1",
-    "@mui/material": "^5.13.3",
     "@tanstack/react-query": "^4.6.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",

samples/musicfestival-frontend-react/src/App.css

@@ -1,4 +1,3 @@
-import { Autocomplete, TextField } from "@mui/material";
 import { useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import { ArtistAutocompleteQuery, useArtistAutocompleteQuery } from "../generated";
@@ -31,7 +30,7 @@ function SearchButton(): JSX.Element {
 
     function onValueChange(event: any){
         setSearchValue(event.target.value);
-        event.target.value != "" && event.target.value !== undefined ? setIsShown(true) : setIsShown(false);
+        event.target.value !== undefined ? setIsShown(true) : setIsShown(false);
     }
 
     function onAutoClick(event: any){
@@ -41,51 +40,39 @@ function SearchButton(): JSX.Element {
 
     return (
         <div>
-            <div className="nav-table-cell">
-                <input className="search-input" type="text" id="search-input" placeholder="Search" 
-                    onKeyPress={(event) => {search(event, 'keypress')}} value={searchValue} onChange={onValueChange} />
+            <div className="nav-table-cell autocomplete">
+                <input className="search-input" 
+                    type="text" 
+                    id="search-input" 
+                    placeholder="Search" 
+                    onKeyPress={(event) => {search(event, 'keypress')}} 
+                    value={searchValue} 
+                    onChange={onValueChange}
+                    onFocus={() => setIsShown(true)}
+                    onBlur={() =>
+                        setTimeout(() => {
+                            setIsShown(false);
+                        }, 150)
+                    } />
                     <a className="search-icon" onClick={(event) => {search(event, 'buttonclick')}}>
                         <i className="fa fa-search"></i>
                     </a>
-
-                    {/* <Autocomplete
-                        sx={{
-                        display: 'inline-block',
-                        '& input': {
-                            width: 200,
-                            bgcolor: 'background.paper',
-                            color: (theme) =>
-                            theme.palette.getContrastText(theme.palette.background.paper),
-                        },
-                        }}
-                        id="custom-input-demo"
-                        options={stringArr}
-                        renderInput={(params) => (
-                        <div ref={params.InputProps.ref}>
-                            <input className="search-input" type="text" id="search-input" placeholder="Search" 
-                    onKeyPress={(event) => {search(event, 'keypress')}} value={searchValue} onChange={onValueChange} {...params.inputProps} />
-                    <a className="search-icon" onClick={(event) => {search(event, 'buttonclick')}}>
-                        <i className="fa fa-search"></i>
-                    </a>
-                        </div>
-                        )}
-                    /> */}
-            <div className="autocomplete-block" style={isShown ? {display: "inherit"}: {display: "none"}}>
-                {
-                    autocompleteData?.ArtistDetailsPage?.autocomplete?.ArtistName?.map((name) => {
-                        return(
-                            <div key={name} onClick={(event) => onAutoClick(event)}>{name}</div>
-                        )
-                    })                    
-                }
-                {
-                    autocompleteData?.ArtistDetailsPage?.autocomplete?.StageName?.map((name) => {
-                        return(
-                            <div key={name} onClick={(event) => onAutoClick(event)}>{name}</div>
-                        )
-                    })
-                }
-            </div>
+                <div className="autocomplete-block" style={isShown ? {display: "inherit"}: {display: "none"}}>
+                    {
+                        autocompleteData?.ArtistDetailsPage?.autocomplete?.ArtistName?.map((name) => {
+                            return(
+                                <div key={name} onClick={(event) => onAutoClick(event)}>{name}</div>
+                            )
+                        })                    
+                    }
+                    {
+                        autocompleteData?.ArtistDetailsPage?.autocomplete?.StageName?.map((name) => {
+                            return(
+                                <div key={name} onClick={(event) => onAutoClick(event)}>{name}</div>
+                            )
+                        })
+                    }
+                </div>
             </div>
         </div>
     );