From fdbcc9ddbe61ae807f653edab6cb5ac72bc1cc58 Mon Sep 17 00:00:00 2001
From: Doan Thanh Nguyen <doanthanh.nguyen@optimizely.com>
Date: Wed, 21 Jun 2023 17:54:57 +0700
Subject: [PATCH 1/2] CG-4370 improve autocomplete

- made some small changes
---
 .vscode/launch.json                           | 15 ++++
 .../musicfestival-frontend-react/package.json |  1 -
 .../musicfestival-frontend-react/src/App.css  | 10 ++-
 .../src/components/SearchButton.tsx           | 75 ++++++++-----------
 4 files changed, 53 insertions(+), 48 deletions(-)
 create mode 100644 .vscode/launch.json

diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..f6b35a0
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/samples/musicfestival-frontend-react/package.json b/samples/musicfestival-frontend-react/package.json
index 047af9a..f5cf8f9 100644
--- a/samples/musicfestival-frontend-react/package.json
+++ b/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",
diff --git a/samples/musicfestival-frontend-react/src/App.css b/samples/musicfestival-frontend-react/src/App.css
index fcbabbc..08e241e 100644
--- a/samples/musicfestival-frontend-react/src/App.css
+++ b/samples/musicfestival-frontend-react/src/App.css
@@ -4089,14 +4089,18 @@ input.search-input::placeholder {
   color: #41FFF5;
 }
 
-.autocomplete-block{
+.autocomplete{
   position: relative;
-  bottom: 2.1em;
-  left: 1em;
+}
+
+.autocomplete-block{
+  position: absolute;
   background-color: #fff;
   height: auto;
   color: #000;
   min-width: 9em;
+  top: 40px;
+  right: 26px;
 }
 
 .autocomplete-block div{
diff --git a/samples/musicfestival-frontend-react/src/components/SearchButton.tsx b/samples/musicfestival-frontend-react/src/components/SearchButton.tsx
index 40cf970..ac318a5 100644
--- a/samples/musicfestival-frontend-react/src/components/SearchButton.tsx
+++ b/samples/musicfestival-frontend-react/src/components/SearchButton.tsx
@@ -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>
     );

From e4ab03e79f6dab34defdce492342ab9d510990fb Mon Sep 17 00:00:00 2001
From: Thanh Nguyen <thanh.nguyen@episerver.com>
Date: Fri, 23 Jun 2023 10:06:05 +0700
Subject: [PATCH 2/2] Delete launch.json

---
 .vscode/launch.json | 15 ---------------
 1 file changed, 15 deletions(-)
 delete mode 100644 .vscode/launch.json

diff --git a/.vscode/launch.json b/.vscode/launch.json
deleted file mode 100644
index f6b35a0..0000000
--- a/.vscode/launch.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "chrome",
-            "request": "launch",
-            "name": "Launch Chrome against localhost",
-            "url": "http://localhost:3000",
-            "webRoot": "${workspaceFolder}"
-        }
-    ]
-}
\ No newline at end of file