fix(Dropdown): disable Apply button when no changes are made

packages/core/src/components/Dropdown/Dropdown.test.tsx

@@ -51,8 +51,6 @@ describe("Dropdown", () => {
     const DropdownHeader = screen.getByRole("combobox");
 
     expect(DropdownHeader).toHaveAttribute("aria-expanded", "false");
-
-    expect(DropdownHeader).toHaveAttribute("aria-expanded", "false");
   });
 
   it("should be invalid", async () => {
@@ -132,4 +130,33 @@ describe("Dropdown", () => {
 
     expect(DropdownHeader).toHaveAttribute("aria-expanded", "false");
   });
+
+  it("has Apply button disabled when no changes are made", async () => {
+    render(
+      <HvDropdown
+        aria-label="Main sample"
+        multiSelect
+        values={[
+          { label: "value 1" },
+          { label: "value 2", selected: true },
+          { label: "value 3" },
+          { label: "value 4" },
+        ]}
+      />
+    );
+
+    await userEvent.click(screen.getByRole("combobox"));
+
+    const getApplyButton = () => screen.getByRole("button", { name: "Apply" });
+    const getCheckBox = () => screen.getByRole("checkbox", { name: "value 1" });
+
+    expect(getApplyButton()).toBeDisabled();
+
+    await userEvent.click(getCheckBox());
+    expect(getCheckBox()).toBeChecked();
+    expect(getApplyButton()).toBeEnabled();
+
+    await userEvent.click(getCheckBox());
+    expect(getApplyButton()).toBeDisabled();
+  });
 });

packages/core/src/components/Dropdown/List/List.tsx

@@ -1,4 +1,4 @@
-import { MouseEvent, useContext, useEffect, useState } from "react";
+import { MouseEvent, useContext, useEffect, useMemo, useState } from "react";
 
 import { theme } from "@hitachivantara/uikit-styles";
 
@@ -110,6 +110,10 @@ const cleanHidden = (lst: HvListValue[]) =>
 const valuesExist = (values: HvListValue[]) =>
   values != null && values?.length > 0;
 
+/** Filter selected ordered element `id`s (or `label`) */
+const getSelectedIds = (list: HvListValue[]) =>
+  getSelected(list).map((item) => item.id || item.label);
+
 export const HvDropdownList = (props: HvDropdownListProps) => {
   const {
     id,
@@ -136,6 +140,10 @@ export const HvDropdownList = (props: HvDropdownListProps) => {
   const [anySelected, setAnySelected] = useState<boolean>(false);
   const { width, height } = useContext(BaseDropdownContext);
 
+  const hasChanges = useMemo(() => {
+    return String(getSelectedIds(values)) !== String(getSelectedIds(list));
+  }, [list, values]);
+
   const newLabels = {
     selectAll: labels?.selectAll,
     selectionConjunction: labels?.multiSelectionConjunction,
@@ -307,6 +315,7 @@ export const HvDropdownList = (props: HvDropdownListProps) => {
       <HvActionBar id={setId(id, "actions")}>
         <HvButton
           id={setId(id, "actions-apply")}
+          disabled={!hasChanges}
           onClick={() => onChange(cleanHidden(list), true, true, true)}
           variant="primaryGhost"
         >