fix: fixed dropdown and made it clickable #112

HridoyHazard · Oct 4, 2023 · 2b35d27 · 2b35d27
1 parent f02faba
commit 2b35d27
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 34 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState} from 'react';
 import { useTranslation } from 'react-i18next';
 import { RiCelsiusFill, RiFahrenheitFill } from 'react-icons/ri';
 import {
@@ -158,6 +158,8 @@ function App() {
   // For the autocomplete search box- Places List
   const [countries, setCountries] = useState([]);
   const [countryMatch, setCountryMatch] = useState([]);
+  const [searchValue, setSearchValue] = useState([]);
+  const [isDropdownVisible, setDropdownVisible] = useState(false);
 
   useEffect(() => {
     const loadCountries = async () => {
@@ -190,8 +192,16 @@ function App() {
         return country.match(regex) || country.match(regex);
       });
       setCountryMatch(matches);
+      setDropdownVisible(true);
     }
     // console.log(countryMatch);
+    setSearchValue(input);
+  };
+
+  const handleSelection = (selectedCountry) => {
+    setSearchValue(selectedCountry);
+    setDropdownVisible(false); // Hide the dropdown after selection
+    // You can perform search or other actions related to the selected country here
   };
 
   // load current location weather info on load
@@ -302,33 +312,38 @@ function App() {
 
             <hr />
 
-            <form className='search-bar' noValidate onSubmit={handleSubmit}>
-              <input
-                onClick={activate}
-                placeholder={active ? '' : 'Explore cities weather'}
-                onChange={(e) => searchCountries(e.target.value)}
-                required
-                className={isDark ? 'input_search_dark' : 'input_search'}
-
-              />
-              <div className='list-dropdown'>
-                {countryMatch &&
-                  countryMatch.map((item, index) => (
-                    <div>
-                      {/* eslint-disable-next-line no-template-curly-in-string */}
-                      <Card title={`Country: ${item}`}></Card>
-                    </div>
-                  ))}
-              </div>
-
-              <button className='s-icon'>
-                <TbSearch
-                  onClick={() => {
-                    navigator.geolocation.getCurrentPosition(myIP);
-                  }}
-                />
-              </button>
-            </form>
+    <form className='form-width' noValidate onSubmit={handleSubmit}>
+      <div className='search-bar'>
+      <input
+        onClick={() => setDropdownVisible(true)}
+        placeholder={'Explore cities weather'}
+        onChange={(e) => searchCountries(e.target.value)}
+        value={searchValue}
+        required
+        className={isDark ? 'input_search_dark' : 'input_search'}
+      />
+      {isDropdownVisible && countryMatch.length > 0 && (
+        <div className='list-dropdown'>
+          {countryMatch.map((item, index) => (
+            <div
+              key={index}
+              onClick={() => handleSelection(item)} 
+              className='dropdown-item'
+            >
+              <Card title={`Country: ${item}`} />
+            </div>
+          ))}
+        </div>
+      )}
+      <button className='s-icon'>
+        <TbSearch
+          onClick={() => {
+            navigator.geolocation.getCurrentPosition(myIP);
+          }}
+        />
+      </button>
+      </div>
+    </form>
 
             <button
               className='s-icon sound-toggler'

diff --git a/src/index.css b/src/index.css
@@ -178,10 +178,17 @@ body {
   border-bottom: 3px solid #ffff;
   width: 30%;
 }
-.search-bar {
+
+.form-width{
   display: flex;
+  justify-content: center;
   width: 100%;
-  padding: 2% 28%;
+}
+
+.search-bar {
+  display: flex;
+  width: 50%;
+  position: relative;
 }
 
 .search-bar > input {
@@ -257,10 +264,28 @@ body {
 }
 
 .list-dropdown {
+  display: flex;
+  flex-direction: row;
+  position: absolute;
+  z-index: 10; /* Set a higher z-index value */
+  background-color: var(--cardColor); 
   flex-wrap: wrap;
-  /* margin-top:2px; */
-  height: 62px;
-  color: #ffffff;
+  margin-top: 62px;
+  height: 10vh;
+  color: var(--textColor);
+  width: 100%;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.dropdown-item{
+  width: 100%;
+  padding: 10px;
+}
+
+.dropdown-item:hover {
+  background-color: var(--textColor);
+  color: var(--cardColor);
 }
 
 @media only screen and (max-width: 1024px) {
@@ -307,7 +332,7 @@ body {
   }
   .search-bar {
     display: flex;
-    width: 100%;
+    width: 50%;
     padding-bottom: 10%;
   }
   .info-container {