Merge pull request #260 from os2display/feature/2796-bug-multi-dropdown

2896: make it work with both id and @id

CHANGELOG.md

@@ -5,6 +5,9 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+- [#260](https://github.com/os2display/display-admin-client/pull/260)
+  - Bug in multiselect, fixed by removing duplicates by key both `@id`and `id` 
+
 - [#259](https://github.com/os2display/display-admin-client/pull/259)
   - Add saving of playlists/groups with screen (as opposed to _after_)
   - Clean up `screen-manager.jsx`

src/components/util/forms/multiselect-dropdown/multi-dropdown.jsx

@@ -18,7 +18,8 @@ import "./multi-dropdown.scss";
  * @param {Array} props.selected - The selected options
  * @param {string} props.name - The id of the form element
  * @param {boolean} props.isLoading - Whether the component is loading.
- * @param {string | null} props.noSelectedString - The label for when there is nothing selected.
+ * @param {string | null} props.noSelectedString - The label for when there is
+ *   nothing selected.
  * @param {string} props.errorText - The string to display on error.
  * @param {string} props.label - The input label
  * @param {string | null} props.helpText - Help text for the dropdown.
@@ -122,13 +123,22 @@ function MultiSelectComponent({
   const addOrRemoveNewEntryToSelected = (multiselectData) => {
     let selectedOptions = [];
     const idsOfSelectedEntries = multiselectData.map(({ value }) => value);
-
-    selectedOptions = removeDuplicatesByKey(
-      [...selected, ...options].filter((option) =>
-        idsOfSelectedEntries.includes(option["@id"] || option.id)
-      ),
-      "@id"
-    );
+    const selectedAndOptions = [...selected, ...options];
+    if ("@id" in selectedAndOptions[0]) {
+      selectedOptions = removeDuplicatesByKey(
+        selectedAndOptions.filter((option) =>
+          idsOfSelectedEntries.includes(option["@id"])
+        ),
+        "@id"
+      );
+    } else {
+      selectedOptions = removeDuplicatesByKey(
+        selectedAndOptions.filter(({ id }) =>
+          idsOfSelectedEntries.includes(id)
+        ),
+        "id"
+      );
+    }
 
     if (singleSelect) {
       selectedOptions = [selectedOptions[selectedOptions.length - 1]];