diff --git a/client/src/components/Form/Elements/FormData/FormData.test.js b/client/src/components/Form/Elements/FormData/FormData.test.js
index 42910c30a0ec..9b97ed3296ab 100644
--- a/client/src/components/Form/Elements/FormData/FormData.test.js
+++ b/client/src/components/Form/Elements/FormData/FormData.test.js
@@ -36,7 +36,7 @@ const defaultOptions = {
         { id: "hda1", hid: 1, name: "hdaName1", src: "hda", tags: ["tag1"] },
         { id: "hda2", hid: 2, name: "hdaName2", src: "hda", tags: ["tag1", "tag2"] },
         { id: "hda3", hid: 3, name: "hdaName3", src: "hda", tags: ["tag2", "tag3"] },
-        { id: "hda3", hid: 4, name: "hdaName4", src: "hda" },
+        { id: "hda4", hid: 4, name: "hdaName4", src: "hda" },
     ],
     hdca: [
         { id: "hdca5", hid: 5, name: "hdcaName5", src: "hdca" },
@@ -61,7 +61,7 @@ describe("FormData", () => {
         const value_1 = {
             batch: false,
             product: false,
-            values: [{ id: "hda3", src: "hda", map_over_type: null }],
+            values: [{ id: "hda4", src: "hda", map_over_type: null }],
         };
         const options = wrapper.find(".btn-group").findAll("button");
         expect(options.length).toBe(4);
@@ -122,7 +122,7 @@ describe("FormData", () => {
         expect(wrapper.emitted().input.length).toEqual(1);
         const selectedValues = wrapper.findAll(SELECTED_VALUE);
         expect(selectedValues.length).toBe(2);
-        expect(selectedValues.at(0).text()).toBe("4: hdaName4");
+        expect(selectedValues.at(0).text()).toBe("3: hdaName3");
         expect(selectedValues.at(1).text()).toBe("2: hdaName2");
         const value_0 = {
             batch: false,
@@ -153,6 +153,39 @@ describe("FormData", () => {
         expect(wrapper.emitted().input[2][0]).toEqual(null);
     });
 
+    it("properly sorts multiple datasets", async () => {
+        const wrapper = createTarget({
+            value: {
+                // the order of values does not matter here
+                values: [
+                    { id: "hda2", src: "hda" },
+                    { id: "hda3", src: "hda" },
+                    { id: "hda1", src: "hda" },
+                ],
+            },
+            multiple: true,
+            optional: true,
+            options: defaultOptions,
+        });
+        const selectedValues = wrapper.findAll(SELECTED_VALUE);
+        expect(selectedValues.length).toBe(3);
+        // the values in the multiselect are sorted by hid DESC
+        expect(selectedValues.at(0).text()).toBe("3: hdaName3");
+        expect(selectedValues.at(1).text()).toBe("2: hdaName2");
+        expect(selectedValues.at(2).text()).toBe("1: hdaName1");
+        await selectedValues.at(0).trigger("click");
+        const value_sorted = {
+            batch: false,
+            product: false,
+            values: [
+                // the values in the emitted input are sorted by hid ASC
+                { id: "hda1", map_over_type: null, src: "hda" },
+                { id: "hda2", map_over_type: null, src: "hda" },
+            ],
+        };
+        expect(wrapper.emitted().input[1][0]).toEqual(value_sorted);
+    });
+
     it("dataset collection as hda", async () => {
         const wrapper = createTarget({
             value: { values: [{ id: "dce1", src: "dce" }] },