Adding placeholder and adding in TagInput a background color.

src/components/Directory/ManageContact.jsx

@@ -23,7 +23,7 @@ import Label from "../common/Label";
 const ManageContact = ({ contactId, closeModal }) => {
   // fetch master data
   const { buckets, loading: bucketsLoaging } = useBuckets();
-  const { data:projects, loading: projectLoading } = useProjects();
+  const { data: projects, loading: projectLoading } = useProjects();
   const { contactCategory, loading: contactCategoryLoading } =
     useContactCategory();
   const { organizationList } = useOrganization();
@@ -205,12 +205,12 @@ const ManageContact = ({ contactId, closeModal }) => {
             <Label htmlFor={"organization"} required>
               Organization
             </Label>
-           <InputSuggestions
+            <InputSuggestions
-    organizationList={organizationList}
+              organizationList={organizationList}
-  value={watch("organization") || ""}
+              value={watch("organization") || ""}
-  onChange={(val) => setValue("organization", val, { shouldValidate: true })}
+              onChange={(val) => setValue("organization", val, { shouldValidate: true })}
-  error={errors.organization?.message}
+              error={errors.organization?.message}
-/>
+            />
 
           </div>
         </div>
@@ -408,6 +408,7 @@ const ManageContact = ({ contactId, closeModal }) => {
             label="Tags"
             options={contactTags}
             isRequired={true}
+            placeholder="Enter Tag"
           />
           {errors.tags && (
             <small className="danger-text">{errors.tags.message}</small>
@@ -482,7 +483,7 @@ const ManageContact = ({ contactId, closeModal }) => {
           <button className="btn btn-sm btn-primary" type="submit" disabled={isPending}>
             {isPending ? "Please Wait..." : "Submit"}
           </button>
-         
+
         </div>
       </form>
     </FormProvider>

src/components/ServiceProject/ManageJob.jsx

@@ -108,6 +108,7 @@ const ManageJob = ({ Job }) => {
               type="text"
               {...register("title")}
               className="form-control form-control"
+              placeholder="Enter Title"
             />
           </div>
 
@@ -144,6 +145,7 @@ const ManageJob = ({ Job }) => {
               options={JobTags?.data}
               name="tags"
               label="Tag"
+              placeholder="Enter Tag"
               required
             />
           </div>

src/components/common/TagInput.jsx

@@ -2,7 +2,7 @@ import { useFormContext, useWatch } from "react-hook-form";
 import React, { useEffect, useState } from "react";
 import Label from "./Label";
 
-const TagInput = ({ label, name, placeholder, color = "#e9ecef", required=false, options = [] }) => {
+const TagInput = ({ label, name, placeholder, color = "#e9ecef", required = false, options = [] }) => {
   const { setValue, watch } = useFormContext();
   const tags = watch(name) || [];
   const [input, setInput] = useState("");
@@ -33,29 +33,29 @@ const TagInput = ({ label, name, placeholder, color = "#e9ecef", required=false,
     }
   };
 
-const handleChange = (e) => {
+  const handleChange = (e) => {
-  const val = e.target.value;
+    const val = e.target.value;
-  setInput(val);
+    setInput(val);
 
-  if (val) {
+    if (val) {
-    setSuggestions(
+      setSuggestions(
-      options
+        options
-        .filter((opt) => {
+          .filter((opt) => {
-          const label = typeof opt === "string" ? opt : opt.name;
+            const label = typeof opt === "string" ? opt : opt.name;
-          return (
+            return (
-            label.toLowerCase().includes(val.toLowerCase()) &&
+              label.toLowerCase().includes(val.toLowerCase()) &&
-            !tags.some((t) => t.name === label)
+              !tags.some((t) => t.name === label)
-          );
+            );
-        })
+          })
-        .map((opt) => ({
+          .map((opt) => ({
-          name: typeof opt === "string" ? opt : opt.name,
+            name: typeof opt === "string" ? opt : opt.name,
-          isActive: true,
+            isActive: true,
-        }))
+          }))
-    );
+      );
-  } else {
+    } else {
-    setSuggestions([]);
+      setSuggestions([]);
-  }
+    }
-};
+  };
 
   const handleSuggestionClick = (sugg) => {
     handleAdd(sugg);
@@ -105,6 +105,9 @@ const handleChange = (e) => {
               outline: "none",
               flex: 1,
               minWidth: "120px",
+              backgroundColor: "white",
+              color: "black"
+
             }}
           />
         </div>