[WC-2933] Combobox keep selection if available

packages/pluggableWidgets/combobox-web/CHANGELOG.md

@@ -10,6 +10,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - We fixed an issue where events from element in footer not directly triggered when input being focused.
 
+- We fixed an issue where combobox selection was reset during search operations (requires Mendix 10.21 or above).
+
 ## [2.4.0] - 2025-05-19
 
 ### Fixed

packages/pluggableWidgets/combobox-web/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/combobox-web",
     "widgetName": "Combobox",
-    "version": "2.4.1",
+    "version": "2.4.2",
     "description": "Configurable Combo box widget with suggestions and autocomplete.",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",

packages/pluggableWidgets/combobox-web/src/helpers/Database/DatabaseMultiSelectionSelector.ts

@@ -121,6 +121,7 @@ export class DatabaseMultiSelectionSelector implements MultiSelector {
         this.selectAllButton = props.selectAllButton;
         this.selectedItemsStyle = props.selectedItemsStyle;
         this.selection = props.optionsSourceDatabaseItemSelection as SelectionMultiValue;
+        this.selection.setKeepSelection?.(() => true);
         this.selectionMethod = props.selectionMethod;
         this.selectedItemsSorting = props.selectedItemsSorting;
 
@@ -133,7 +134,23 @@ export class DatabaseMultiSelectionSelector implements MultiSelector {
     }
 
     setValue(value: string[] | null): void {
-        const newValue = value?.map(v => this.options._optionToValue(v)!);
+        const newValue = value
+            ?.map(v => {
+                const knownObject = this.options._optionToValue(v);
+                if (knownObject) {
+                    return knownObject;
+                }
+
+                // look if this value is in the selection
+                const selectedObject = this.selection?.selection.find(item => item.id === v);
+                if (selectedObject) {
+                    return selectedObject;
+                }
+
+                console.warn(`Error setting value: '${v}', not found in options or selection`);
+                return null;
+            })
+            .filter((v): v is ObjectItem => !!v);
         if (newValue) {
             this.selection?.setSelection(newValue);
         }

packages/pluggableWidgets/combobox-web/src/helpers/Database/DatabaseSingleSelectionSelector.ts

@@ -115,6 +115,7 @@ export class DatabaseSingleSelectionSelector<T extends string | Big, R extends E
         this.status = targetAttribute?.status ?? ds.status;
         this.validation = targetAttribute?.validation;
         this.selection = props.optionsSourceDatabaseItemSelection as SelectionSingleValue;
+        this.selection.setKeepSelection?.(() => true);
 
         this.clearable = clearable;
         this.customContentType = customContentType;

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.4.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Combobox" version="2.4.2" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Combobox.xml" />
         </widgetFiles>

packages/pluggableWidgets/combobox-web/typings/ComboboxProps.d.ts

@@ -43,10 +43,7 @@ export type FilterTypeEnum = "contains" | "containsExact" | "startsWith" | "none
 
 export interface OptionsSourceStaticDataSourcePreviewType {
     staticDataSourceValue: string;
-    staticDataSourceCustomContent: {
-        widgetCount: number;
-        renderer: ComponentType<{ children: ReactNode; caption?: string }>;
-    };
+    staticDataSourceCustomContent: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };
     staticDataSourceCaption: string;
 }
 
@@ -130,15 +127,9 @@ export interface ComboboxPreviewProps {
     noOptionsText: string;
     clearable: boolean;
     optionsSourceAssociationCustomContentType: OptionsSourceAssociationCustomContentTypeEnum;
-    optionsSourceAssociationCustomContent: {
-        widgetCount: number;
-        renderer: ComponentType<{ children: ReactNode; caption?: string }>;
-    };
+    optionsSourceAssociationCustomContent: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };
     optionsSourceDatabaseCustomContentType: OptionsSourceDatabaseCustomContentTypeEnum;
-    optionsSourceDatabaseCustomContent: {
-        widgetCount: number;
-        renderer: ComponentType<{ children: ReactNode; caption?: string }>;
-    };
+    optionsSourceDatabaseCustomContent: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };
     staticDataSourceCustomContentType: StaticDataSourceCustomContentTypeEnum;
     showFooter: boolean;
     menuFooterContent: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };

packages/shared/widget-plugin-filtering/package.json

@@ -38,7 +38,7 @@
         "@mendix/widget-plugin-hooks": "workspace:*",
         "@mendix/widget-plugin-platform": "workspace:*",
         "downshift": "^9.0.8",
-        "mendix": "^10.16.49747",
+        "mendix": "10.23.70273",
         "mobx": "6.12.3",
         "mobx-react-lite": "4.0.7"
     },

packages/shared/widget-plugin-test-utils/package.json

@@ -30,7 +30,7 @@
         "test": "jest"
     },
     "dependencies": {
-        "mendix": "^10.16.49747"
+        "mendix": "10.23.70273"
     },
     "devDependencies": {
         "@mendix/eslint-config-web-widgets": "workspace:*",

packages/shared/widget-plugin-test-utils/src/builders/SelectionMultiValueBuilder.ts

@@ -9,7 +9,8 @@ export class SelectionMultiValueBuilder {
             selection: [] as ObjectItem[],
             setSelection(next: ObjectItem[]) {
                 this.selection = next;
-            }
+            },
+            setKeepSelection(): void {}
         };
 
         this.selectionValue = value as SelectionMultiValue;