fix(combobox-web): handle selection order for multi select

mendix · Jan 6, 2025 · db44fa4 · db44fa4
1 parent cc88b77
commit db44fa4
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 4 deletions.
diff --git a/packages/pluggableWidgets/combobox-web/CHANGELOG.md b/packages/pluggableWidgets/combobox-web/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We fixed the sorting to display the multi-selected items in selection order.
+
 ## [2.1.3] - 2024-12-11
 
 ### Fixed

diff --git a/packages/pluggableWidgets/combobox-web/package.json b/packages/pluggableWidgets/combobox-web/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@mendix/combobox-web",
     "widgetName": "Combobox",
-    "version": "2.1.3",
+    "version": "2.1.4",
     "description": "Configurable Combo box widget with suggestions and autocomplete.",
     "copyright": "© Mendix Technology BV 2024. All rights reserved.",
     "license": "Apache-2.0",

diff --git a/packages/pluggableWidgets/combobox-web/src/helpers/Association/AssociationMultiSelector.ts b/packages/pluggableWidgets/combobox-web/src/helpers/Association/AssociationMultiSelector.ts
@@ -12,19 +12,39 @@ export class AssociationMultiSelector
     selectedItemsStyle: SelectedItemsStyleEnum = "text";
     selectionMethod: SelectionMethodEnum = "checkbox";
     selectAllButton = false;
+    private orderedSelections: string[] = [];
+
     updateProps(props: ComboboxContainerProps): void {
         super.updateProps(props);
         this.selectedItemsStyle = props.selectedItemsStyle;
         this.selectionMethod = props.selectionMethod;
         this.selectAllButton = props.selectAllButton;
-        this.currentId = this._attr?.value?.map(v => v.id) ?? null;
+
+        const newValues = this._attr?.value ?? null;
+        if (newValues) {
+            const newValueIds = newValues.map(v => v.id.toString());
+            this.orderedSelections = [
+                ...this.orderedSelections.filter(id => newValueIds.includes(id.toString())),
+                ...newValueIds.filter(id => !this.orderedSelections.includes(id))
+            ];
+            this.currentId = this.orderedSelections;
+        } else {
+            this.orderedSelections = [];
+            this.currentId = null;
+        }
+
         if (this.selectionMethod === "rowclick" || this.customContentType === "yes") {
             this.selectedItemsStyle = "boxes";
         }
     }
 
     setValue(value: string[] | null): void {
-        const newValue = value?.map(v => this.options._optionToValue(v)!);
+        if (value === null) {
+            this.orderedSelections = [];
+        } else {
+            this.orderedSelections = value;
+        }
+        const newValue = this.orderedSelections.map(v => this.options._optionToValue(v)!);
         this._attr?.setValue(newValue);
         super.setValue(value);
     }

diff --git a/packages/pluggableWidgets/combobox-web/src/package.xml b/packages/pluggableWidgets/combobox-web/src/package.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Combobox" version="2.1.3" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Combobox" version="2.1.4" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Combobox.xml" />
         </widgetFiles>