[WC-2638]: Fix combobox issue not triggering onChange event (#1219)

Author: samuelreichert

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 an issue where the onChange event was not being triggered when selecting an item for the first time.
+
 ## [2.0.1] - 2024-08-16
 
 ### Fixed

packages/pluggableWidgets/combobox-web/package.json

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

packages/pluggableWidgets/combobox-web/src/Combobox.editorConfig.ts

@@ -49,6 +49,7 @@ export function getProperties(values: ComboboxPreviewProps, defaultProperties: P
                 "selectionMethod",
                 "selectAllButton",
                 "selectAllButtonCaption",
+                "onChangeDatabaseEvent",
                 ...ASSOCIATION_SOURCE_CONFIG,
                 ...LAZY_LOADING_CONFIG
             ]);
@@ -59,7 +60,11 @@ export function getProperties(values: ComboboxPreviewProps, defaultProperties: P
                 hidePropertiesIn(defaultProperties, values, ["attributeBoolean"]);
             }
         } else if (values.optionsSourceType === "association") {
-            hidePropertiesIn(defaultProperties, values, ["attributeEnumeration", "attributeBoolean"]);
+            hidePropertiesIn(defaultProperties, values, [
+                "attributeEnumeration",
+                "attributeBoolean",
+                "onChangeDatabaseEvent"
+            ]);
             if (values.optionsSourceAssociationCaptionType === "attribute") {
                 hidePropertiesIn(defaultProperties, values, ["optionsSourceAssociationCaptionExpression"]);
             } else {
@@ -100,6 +105,7 @@ export function getProperties(values: ComboboxPreviewProps, defaultProperties: P
             "selectionMethod",
             "selectAllButton",
             "selectAllButtonCaption",
+            "onChangeEvent",
             ...ASSOCIATION_SOURCE_CONFIG
         ]);
         if (values.optionsSourceDatabaseDataSource === null) {

packages/pluggableWidgets/combobox-web/src/Combobox.xml

@@ -50,7 +50,7 @@
                     <caption>Selectable objects</caption>
                     <description />
                 </property>
-                <property key="optionsSourceDatabaseItemSelection" type="selection" dataSource="optionsSourceDatabaseDataSource">
+                <property key="optionsSourceDatabaseItemSelection" type="selection" dataSource="optionsSourceDatabaseDataSource" onChange="onChangeDatabaseEvent">
                     <caption>Selection type</caption>
                     <description />
                     <selectionTypes>
@@ -314,6 +314,10 @@
                 <caption>On change action</caption>
                 <description />
             </property>
+            <property key="onChangeDatabaseEvent" type="action" required="false">
+                <caption>On change action</caption>
+                <description />
+            </property>
             <property key="onEnterEvent" type="action" required="false">
                 <caption>On enter action</caption>
                 <description />

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

@@ -1,5 +1,4 @@
-import { ActionValue, ListAttributeValue, ObjectItem } from "mendix";
-import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
+import { ListAttributeValue, ObjectItem } from "mendix";
 import {
     ComboboxContainerProps,
     LoadingTypeEnum,
@@ -24,7 +23,6 @@ export class BaseDatabaseSingleSelector<T extends string | Big> implements Singl
     status: Status = "unavailable";
     type = "single" as const;
     protected _objectsMap: Map<string, ObjectItem> = new Map();
-    protected onChangeEvent?: ActionValue;
     protected lazyLoader: LazyLoadProvider = new LazyLoadProvider();
 
     constructor() {
@@ -33,17 +31,8 @@ export class BaseDatabaseSingleSelector<T extends string | Big> implements Singl
     }
 
     updateProps(props: ComboboxContainerProps): void {
-        const {
-            captionProvider,
-            captionType,
-            clearable,
-            customContentType,
-            ds,
-            filterType,
-            lazyLoading,
-            loadingType,
-            onChangeEvent
-        } = extractDatabaseProps(props);
+        const { captionProvider, captionType, clearable, customContentType, ds, filterType, lazyLoading, loadingType } =
+            extractDatabaseProps(props);
 
         this.lazyLoader.updateProps(ds);
         this.options._updateProps({
@@ -54,14 +43,12 @@ export class BaseDatabaseSingleSelector<T extends string | Big> implements Singl
         });
 
         this.clearable = clearable;
-        this.onChangeEvent = onChangeEvent;
         this.customContentType = customContentType;
         this.lazyLoading = lazyLoading;
         this.loadingType = loadingType;
     }
 
     setValue(objectId: string | null): void {
         this.currentId = objectId;
-        executeAction(this.onChangeEvent);
     }
 }

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

@@ -1,6 +1,5 @@
 import { ThreeStateCheckBoxEnum } from "@mendix/widget-plugin-component-kit/ThreeStateCheckBox";
-import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
-import { ActionValue, ListAttributeValue, ObjectItem, SelectionMultiValue } from "mendix";
+import { ListAttributeValue, ObjectItem, SelectionMultiValue } from "mendix";
 import {
     ComboboxContainerProps,
     LoadingTypeEnum,
@@ -31,7 +30,6 @@ export class DatabaseMultiSelectionSelector implements MultiSelector {
     type = "multi" as const;
     protected lazyLoader: LazyLoadProvider = new LazyLoadProvider();
     private _objectsMap: Map<string, ObjectItem> = new Map();
-    private onChangeEvent?: ActionValue;
 
     constructor() {
         this.caption = new DatabaseCaptionsProvider(this._objectsMap);
@@ -74,7 +72,6 @@ export class DatabaseMultiSelectionSelector implements MultiSelector {
             filterType,
             lazyLoading,
             loadingType,
-            onChangeEvent,
             valueAttribute
         } = extractDatabaseProps(props);
 
@@ -118,7 +115,6 @@ export class DatabaseMultiSelectionSelector implements MultiSelector {
         this.customContentType = customContentType;
         this.lazyLoading = lazyLoading;
         this.loadingType = loadingType;
-        this.onChangeEvent = onChangeEvent;
         this.selectAllButton = props.selectAllButton;
         this.selectedItemsStyle = props.selectedItemsStyle;
         this.selection = props.optionsSourceDatabaseItemSelection as SelectionMultiValue;
@@ -131,6 +127,5 @@ export class DatabaseMultiSelectionSelector implements MultiSelector {
         if (newValue) {
             this.selection?.setSelection(newValue);
         }
-        executeAction(this.onChangeEvent);
     }
 }

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

@@ -1,5 +1,4 @@
 import {
-    ActionValue,
     DynamicValue,
     EditableValue,
     ListAttributeValue,
@@ -29,14 +28,12 @@ type ExtractionReturnValue = {
     filterType: FilterTypeEnum;
     lazyLoading: boolean;
     loadingType: LoadingTypeEnum;
-    onChangeEvent?: ActionValue;
     valueAttribute: ListAttributeValue<string | Big>;
 };
 
 export function extractDatabaseProps(props: ComboboxContainerProps): ExtractionReturnValue {
     const attr = props.databaseAttributeString;
     const filterType = props.filterType;
-    const onChangeEvent = props.onChangeEvent;
 
     const ds = props.optionsSourceDatabaseDataSource;
     if (!ds) {
@@ -80,7 +77,6 @@ export function extractDatabaseProps(props: ComboboxContainerProps): ExtractionR
         filterType,
         lazyLoading,
         loadingType,
-        onChangeEvent,
         valueAttribute
     };
 }

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

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

@@ -133,6 +133,7 @@ export interface ComboboxPreviewProps {
     selectAllButtonCaption: string;
     readOnlyStyle: ReadOnlyStyleEnum;
     onChangeEvent: {} | null;
+    onChangeDatabaseEvent: {} | null;
     onEnterEvent: {} | null;
     onLeaveEvent: {} | null;
     ariaRequired: boolean;