[Feature #129790] Improvments to the map searchbox

eea · Apr 20, 2021 · bfe77bc · bfe77bc
1 parent 4620ee6
commit bfe77bc
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 8 deletions.
diff --git a/src/components/manage/Blocks/FiltersBlock/View.jsx b/src/components/manage/Blocks/FiltersBlock/View.jsx
@@ -70,13 +70,8 @@ const View = ({ content, ...props }) => {
   const mapSidebarExists = document?.getElementById('map-sidebar');
 
   const searchResults = [
-    ...sitesResults.slice(
-      0,
-      locationResults.length < 3 ? 6 - locationResults.length : 3,
-    ),
-    ...locationResults
-      .map((result) => result.text)
-      .slice(0, sitesResults.length < 3 ? 6 - sitesResults.length : 3),
+    ...locationResults.map((result) => result.text),
+    ...sitesResults,
   ];
 
   useEffect(function () {
@@ -983,7 +978,35 @@ const View = ({ content, ...props }) => {
         <Input
           aria-label="Site search"
           className="search"
-          icon="search"
+          icon={
+            <>
+              {searchTerm?.length > 0 ? (
+                <button
+                  className="delete-icon"
+                  onClick={() => {
+                    setSearchResultsActive(false);
+                    setSearchTerm('');
+                    setTriggerSearch(!modal);
+                  }}
+                >
+                  <i aria-hidden className="delete icon" />
+                </button>
+              ) : (
+                ''
+              )}
+
+              <button className="search-icon">
+                <i
+                  aria-hidden
+                  className="search icon"
+                  onClick={() => {
+                    setSearchResultsActive(false);
+                    setTriggerSearch(!modal);
+                  }}
+                />
+              </button>
+            </>
+          }
           placeholder="Search for country, region, city or a site name"
           value={searchTerm}
           onChange={(event, data) => {

diff --git a/src/components/manage/Blocks/FiltersBlock/style.css b/src/components/manage/Blocks/FiltersBlock/style.css
@@ -21,8 +21,29 @@
   border-radius: 22px;
 }
 
+.search-input-container .ui.input.search button {
+  position: absolute;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  right: .5em;
+  height: 100%;
+}
+
+.search-input-container .ui.input.search button.delete-icon {
+  right: 2em;
+}
+
 .search-input-container .ui.input.search .icon {
   opacity: 1;
+  cursor: pointer;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  right: unset;
+  top: unset;
 }
 
 .search-input-container .ui.input.search .icon::before {