From 492bda021f65c2edc843f37b4705cd32f21c6ab9 Mon Sep 17 00:00:00 2001
From: ebube <ebube.ojinta@chiefsoft.com>
Date: Tue, 28 Nov 2023 07:41:31 -0800
Subject: [PATCH] Select Option Bug Fixed

---
 src/components/AddJob/AddJob.jsx | 63 +++++++++++++++++---------------
 1 file changed, 34 insertions(+), 29 deletions(-)

diff --git a/src/components/AddJob/AddJob.jsx b/src/components/AddJob/AddJob.jsx
index 6aaa71b..a5ee6c3 100644
--- a/src/components/AddJob/AddJob.jsx
+++ b/src/components/AddJob/AddJob.jsx
@@ -167,7 +167,7 @@ function AddJob({ popUpHandler, categories }) {
                     <div className="field w-full mb-6 xl:mb-0">
                       <InputCom
                         fieldClass="px-6 cursor-default"
-                        label="currency"
+                        label="Currency"
                         labelClass="tracking-wide"
                         // inputBg="bg-slate-100"
                         // inputClass="input-curve border border-light-purple"
@@ -272,46 +272,51 @@ function AddJob({ popUpHandler, categories }) {
                     </div>
 
                     <div className="sm:w-[35%] w-full">
-                      <div
+                      <label
                         htmlFor="Job Categories"
-                        className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"'
-                        id="checked-group"
+                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex item-center gap-1"
                       >
                         Categories
-                      </div>
-                      <div
-                        className="sm:flex-col flex flex-wrap px-3 mt-3"
-                        role="group"
-                        aria-labelledby="checked-group"
+                        {props.errors.category && props.touched.category && (
+                          <span className="text-[12px] text-red-500">
+                            {props.errors.category}
+                          </span>
+                        )}
+                      </label>
+                      <select
+                        id="category"
+                        name="category"
+                        value={props.values.category}
+                        className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-[5.4rem] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border`}
+                        onChange={props.handleChange}
+                        onBlur={props.handleBlur}
+                        multiple
                       >
-                        {categories ? (
+                        {walletDetails?.loading ? (
+                          <option className="text-slate-500 text-lg" value="">
+                            Loading...
+                          </option>
+                        ) : walletDetails.data.length ? (
                           <>
+                            {/* <option className="text-slate-500 text-lg" value="">
+                              Select a Category
+                            </option> */}
                             {Object?.entries(categories).map(([key, value]) => (
-                              <label
+                              <option
                                 key={key}
-                                className="flex gap-1 w-full items-center"
+                                className="text-slate-500 "
+                                value={key}
                               >
-                                <Field
-                                  type="checkbox"
-                                  name="category"
-                                  value={key}
-                                />
-                                <span className="text-[13.975px]">{value}</span>
-                              </label>
+                                {value}
+                              </option>
                             ))}
                           </>
                         ) : (
-                          <label className="flex gap-1 w-full items-center">
-                            <Field type="checkbox" name="category" />
-                            <span className="text-[13.975px]">null</span>
-                          </label>
+                          <option className="text-slate-500 text-lg" value="">
+                            No Options Found! Try Again
+                          </option>
                         )}
-                        <span className="h-5 text-sm italic text-[#cf3917]">
-                          {props.errors.category &&
-                            props.touched.category &&
-                            "please select a category"}
-                        </span>
-                      </div>
+                      </select>
                     </div>
                   </div>