Duplicate "X" (Remove) Icon Appearing in Assign Task Popup

This commit is contained in:
Kartik Sharma 2025-08-01 10:27:14 +05:30
parent 74f532799a
commit 88030dcf5a

View File

@ -414,47 +414,46 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
</div>
<div
className="col-12 h-25 overflow-auto"
style={{ maxHeight: "200px" }}
>
{watch("selectedEmployees")?.length > 0 && (
<div className="mt-1">
<div className="text-start px-2">
{watch("selectedEmployees")?.map((empId) => {
const emp = employees.find((emp) => emp.id === empId);
return (
emp && (
<span
key={empId}
className="badge rounded-pill bg-label-primary d-inline-flex align-items-center me-1 mb-1"
>
{emp.firstName} {emp.lastName}
{/* Changed p tag to button for semantic correctness and accessibility */}
<button
type="button"
className="btn-close btn-close-white ms-1" // Added ms-1 for spacing, removed p-0 m-0
aria-label="Remove employee" // More descriptive aria-label
onClick={() => {
const updatedSelected = watch(
"selectedEmployees"
).filter((id) => id !== empId);
setValue(
"selectedEmployees",
updatedSelected
);
trigger("selectedEmployees");
}}
>
<i className="icon-base bx bx-x icon-md"></i>
</button>
</span>
)
);
})}
</div>
className="col-12 h-25 overflow-auto"
style={{ maxHeight: "200px" }}
>
{watch("selectedEmployees")?.length > 0 && (
<div className="mt-1">
<div className="text-start px-2">
{watch("selectedEmployees")?.map((empId) => {
const emp = employees.find((emp) => emp.id === empId);
return (
emp && (
<span
key={empId}
className="badge rounded-pill bg-label-primary d-inline-flex align-items-center me-1 mb-1"
>
{emp.firstName} {emp.lastName}
<p
type="button"
className=" btn-close-white p-0 m-0"
aria-label="Close"
onClick={() => {
const updatedSelected = watch(
"selectedEmployees"
).filter((id) => id !== empId);
setValue(
"selectedEmployees",
updatedSelected
);
trigger("selectedEmployees");
}}
>
<i className="icon-base bx bx-x icon-md "></i>
</p>
</span>
)
);
})}
</div>
</div>
)}
</div>
)}
</div>
{!loading && errors.selectedEmployees && (
<div className="danger-text mt-1">