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();
@@ -210,7 +210,7 @@ const ManageContact = ({ contactId, closeModal }) => {
               value={watch("organization") || ""}
               onChange={(val) => setValue("organization", val, { shouldValidate: true })}
               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>

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,7 +33,7 @@ const TagInput = ({ label, name, placeholder, color = "#e9ecef", required=false,
     }
   };
 
-const handleChange = (e) => {
+  const handleChange = (e) => {
     const val = e.target.value;
     setInput(val);
 
@@ -55,7 +55,7 @@ const handleChange = (e) => {
     } else {
       setSuggestions([]);
     }
-};
+  };
 
   const handleSuggestionClick = (sugg) => {
     handleAdd(sugg);
@@ -105,6 +105,9 @@ const handleChange = (e) => {
               outline: "none",
               flex: 1,
               minWidth: "120px",
+              backgroundColor: "white",
+              color: "black"
+
             }}
           />
         </div>