Merge pull request #257 from os2display/feature/2314-multidropdown-fix

2314: update multi select component, change key in remove duplicates …

CHANGELOG.md

@@ -5,6 +5,9 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+- [#256](https://github.com/os2display/display-admin-client/pull/257)
+  - Update multiselect component
+  - Change key in function from `id` to `@id`
 - [#256](https://github.com/os2display/display-admin-client/pull/256)
   - Fixed published from/to texts.
 - [#255](https://github.com/os2display/display-admin-client/pull/255)

package.json

@@ -32,7 +32,7 @@
     "react-dropzone": "^11.4.2",
     "react-i18next": "^11.16.1",
     "react-images-uploading": "^3.1.2",
-    "react-multi-select-component": "^4.1.12",
+    "react-multi-select-component": "^4.3.4",
     "react-paginate": "^8.1.3",
     "react-quill": "^2.0.0",
     "react-redux": "^7.2.5",

src/components/screen/screen-manager.jsx

@@ -39,12 +39,12 @@ function ScreenManager({
   const { t } = useTranslation("common", { keyPrefix: "screen-manager" });
   const navigate = useNavigate();
   const [orientationOptions] = useState([
-    { title: "Vertikal", id: "vertical" },
-    { title: "Horisontal", id: "horizontal" },
+    { title: "Vertikal", "@id": "vertical" },
+    { title: "Horisontal", "@id": "horizontal" },
   ]);
   const [resolutionOptions] = useState([
-    { title: "4K", id: "4K" },
-    { title: "HD", id: "HD" },
+    { title: "4K", "@id": "4K" },
+    { title: "HD", "@id": "HD" },
   ]);
   const headerText =
     saveMethod === "PUT" ? t("edit-screen-header") : t("create-screen-header");

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

@@ -127,7 +127,7 @@ function MultiSelectComponent({
       [...selected, ...options].filter((option) =>
         idsOfSelectedEntries.includes(option["@id"] || option.id)
       ),
-      "id"
+      "@id"
     );
 
     if (singleSelect) {

yarn.lock

@@ -4141,9 +4141,9 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-multi-select-component@^4.1.12:
+react-multi-select-component@^4.3.4:
   version "4.3.4"
-  resolved "https://registry.npmjs.org/react-multi-select-component/-/react-multi-select-component-4.3.4.tgz"
+  resolved "https://registry.yarnpkg.com/react-multi-select-component/-/react-multi-select-component-4.3.4.tgz#4f4b354bfa1f0353fa9c3bccf8178c87c9780450"
   integrity sha512-Ui/bzCbROF4WfKq3OKWyQJHmy/bd1mW7CQM+L83TfiltuVvHElhKEyPM3JzO9urIcWplBUKv+kyxqmEnd9jPcA==
 
 react-overlays@^5.1.2: