From 191e4897c2a513ffaec9b8635093ec7668313694 Mon Sep 17 00:00:00 2001
From: huayunh <hhuayun0828@gmail.com>
Date: Mon, 17 Jan 2022 12:47:48 -0500
Subject: [PATCH 1/4] Remove "X" from the search field

---
 src/app/pages/SearchBar.tsx | 54 +++++++++++++++++++------------------
 src/index.css               |  7 +++++
 2 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/src/app/pages/SearchBar.tsx b/src/app/pages/SearchBar.tsx
index 136b2ed2a..bf7283110 100644
--- a/src/app/pages/SearchBar.tsx
+++ b/src/app/pages/SearchBar.tsx
@@ -45,7 +45,7 @@ const useStyles = makeStyles((theme: Theme) =>
             width: '100%',
         },
         searchfield: {
-            flex: 1,
+            width: '100%',
         },
         backdrop: {
             zIndex: theme.zIndex.modal,
@@ -230,32 +230,34 @@ export const SearchBar: React.FC<SearchbarProps> = (props) => {
             >
                 <Toolbar style={{ display: 'flex' }} id={'search-bar'}>
                     {searchActive && ( // to allow autofocus
-                        <TextField
-                            className={classes.searchfield}
-                            placeholder={'Search on Brightlayer UI...'}
-                            InputProps={{ disableUnderline: true }}
-                            value={inputString || ''}
-                            onChange={(e): void => onChangeHandler(e.target.value)}
-                            autoFocus
-                            inputMode={'search'}
-                            type={'search'}
-                            onKeyPress={(e): void => {
-                                if (e.key === 'Enter') {
-                                    if (inputString === '') {
-                                        dismissSearchBar();
-                                        return;
-                                    }
-                                    pushHistory(inputString);
+                        <form style={{ flex: 1 }}>
+                            <TextField
+                                className={classes.searchfield}
+                                placeholder={'Search on Brightlayer UI...'}
+                                InputProps={{ disableUnderline: true }}
+                                value={inputString || ''}
+                                onChange={(e): void => onChangeHandler(e.target.value)}
+                                autoFocus
+                                inputMode={'search'}
+                                type={'search'}
+                                onKeyPress={(e): void => {
+                                    if (e.key === 'Enter') {
+                                        if (inputString === '') {
+                                            dismissSearchBar();
+                                            return;
+                                        }
+                                        pushHistory(inputString);
 
-                                    // to dismiss the mobile keyboard
-                                    const field = document.createElement('input');
-                                    field.setAttribute('type', 'text');
-                                    document.getElementById('search-bar')?.appendChild(field);
-                                    field.focus();
-                                    field.remove();
-                                }
-                            }}
-                        />
+                                        // to dismiss the mobile keyboard
+                                        const field = document.createElement('input');
+                                        field.setAttribute('type', 'text');
+                                        document.getElementById('search-bar')?.appendChild(field);
+                                        field.focus();
+                                        field.remove();
+                                    }
+                                }}
+                            />
+                        </form>
                     )}
                     <IconButton
                         onClick={(): void => {
diff --git a/src/index.css b/src/index.css
index 297134b02..ef674539d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -34,6 +34,13 @@ q:after {
     padding: 0;
 }
 
+input[type='search']::-webkit-search-decoration,
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-results-button,
+input[type='search']::-webkit-search-results-decoration {
+    display: none;
+}
+
 blockquote > p:last-child {
     margin-bottom: 0;
 }

From 84f6ca6ec40c28bebd34952153445c80c60d6ebb Mon Sep 17 00:00:00 2001
From: huayunh <hhuayun0828@gmail.com>
Date: Mon, 17 Jan 2022 14:25:07 -0500
Subject: [PATCH 2/4] Remove form tag

---
 src/app/pages/SearchBar.tsx | 54 ++++++++++++++++++-------------------
 1 file changed, 26 insertions(+), 28 deletions(-)

diff --git a/src/app/pages/SearchBar.tsx b/src/app/pages/SearchBar.tsx
index bf7283110..136b2ed2a 100644
--- a/src/app/pages/SearchBar.tsx
+++ b/src/app/pages/SearchBar.tsx
@@ -45,7 +45,7 @@ const useStyles = makeStyles((theme: Theme) =>
             width: '100%',
         },
         searchfield: {
-            width: '100%',
+            flex: 1,
         },
         backdrop: {
             zIndex: theme.zIndex.modal,
@@ -230,34 +230,32 @@ export const SearchBar: React.FC<SearchbarProps> = (props) => {
             >
                 <Toolbar style={{ display: 'flex' }} id={'search-bar'}>
                     {searchActive && ( // to allow autofocus
-                        <form style={{ flex: 1 }}>
-                            <TextField
-                                className={classes.searchfield}
-                                placeholder={'Search on Brightlayer UI...'}
-                                InputProps={{ disableUnderline: true }}
-                                value={inputString || ''}
-                                onChange={(e): void => onChangeHandler(e.target.value)}
-                                autoFocus
-                                inputMode={'search'}
-                                type={'search'}
-                                onKeyPress={(e): void => {
-                                    if (e.key === 'Enter') {
-                                        if (inputString === '') {
-                                            dismissSearchBar();
-                                            return;
-                                        }
-                                        pushHistory(inputString);
-
-                                        // to dismiss the mobile keyboard
-                                        const field = document.createElement('input');
-                                        field.setAttribute('type', 'text');
-                                        document.getElementById('search-bar')?.appendChild(field);
-                                        field.focus();
-                                        field.remove();
+                        <TextField
+                            className={classes.searchfield}
+                            placeholder={'Search on Brightlayer UI...'}
+                            InputProps={{ disableUnderline: true }}
+                            value={inputString || ''}
+                            onChange={(e): void => onChangeHandler(e.target.value)}
+                            autoFocus
+                            inputMode={'search'}
+                            type={'search'}
+                            onKeyPress={(e): void => {
+                                if (e.key === 'Enter') {
+                                    if (inputString === '') {
+                                        dismissSearchBar();
+                                        return;
                                     }
-                                }}
-                            />
-                        </form>
+                                    pushHistory(inputString);
+
+                                    // to dismiss the mobile keyboard
+                                    const field = document.createElement('input');
+                                    field.setAttribute('type', 'text');
+                                    document.getElementById('search-bar')?.appendChild(field);
+                                    field.focus();
+                                    field.remove();
+                                }
+                            }}
+                        />
                     )}
                     <IconButton
                         onClick={(): void => {

From ad5738863aa884a0c3ef01faa0a14ae69c40cdab Mon Sep 17 00:00:00 2001
From: huayunh <hhuayun0828@gmail.com>
Date: Mon, 17 Jan 2022 14:28:29 -0500
Subject: [PATCH 3/4] Clear search after "x" is clicked

---
 src/app/pages/SearchBar.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/pages/SearchBar.tsx b/src/app/pages/SearchBar.tsx
index 136b2ed2a..0518413c5 100644
--- a/src/app/pages/SearchBar.tsx
+++ b/src/app/pages/SearchBar.tsx
@@ -260,6 +260,7 @@ export const SearchBar: React.FC<SearchbarProps> = (props) => {
                     <IconButton
                         onClick={(): void => {
                             dismissSearchBar();
+                            setInputString('');
                         }}
                         edge={'end'}
                     >

From af6bc9fefef75af334620deb45a8fa149a81f327 Mon Sep 17 00:00:00 2001
From: huayunh <hhuayun0828@gmail.com>
Date: Mon, 17 Jan 2022 14:40:38 -0500
Subject: [PATCH 4/4] Make the search bar more selectable

---
 src/app/pages/SearchBar.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/pages/SearchBar.tsx b/src/app/pages/SearchBar.tsx
index 0518413c5..0709bd146 100644
--- a/src/app/pages/SearchBar.tsx
+++ b/src/app/pages/SearchBar.tsx
@@ -255,6 +255,7 @@ export const SearchBar: React.FC<SearchbarProps> = (props) => {
                                     field.remove();
                                 }
                             }}
+                            inputProps={{ style: { height: theme.spacing(7) } }}
                         />
                     )}
                     <IconButton