fix: association caption expression not visible

Author: samuelreichert

packages/pluggableWidgets/combobox-web/package.json

@@ -10,40 +10,44 @@
         "url": "https://github.com/mendix/web-widgets.git"
     },
     "config": {
-        "mendixHost": "http://localhost:8080",
-        "developmentPort": 3000
+        "developmentPort": 3000,
+        "mendixHost": "http://localhost:8080"
     },
     "mxpackage": {
         "name": "Combobox",
         "type": "widget",
         "mpkName": "com.mendix.widget.web.Combobox.mpk"
     },
+    "packagePath": "com.mendix.widget.web",
     "marketplace": {
         "minimumMXVersion": "9.24.0.2965",
         "appNumber": 219304,
-        "appName": "Combo box",
-        "reactReady": true
+        "appName": "Combo box"
     },
     "testProject": {
         "githubUrl": "https://github.com/mendix/testProjects",
         "branchName": "combobox-web"
     },
-    "packagePath": "com.mendix.widget.web",
     "scripts": {
-        "start": "pluggable-widgets-tools start:server",
-        "dev": "pluggable-widgets-tools start:web",
         "build": "pluggable-widgets-tools build:web",
-        "format": "pluggable-widgets-tools format",
-        "lint": "eslint --ext .jsx,.js,.ts,.tsx src/",
-        "test": "jest --projects jest.config.js",
-        "e2e": "run-e2e ci",
-        "e2edev": "run-e2e dev --with-preps",
-        "release": "pluggable-widgets-tools release:web",
         "create-gh-release": "rui-create-gh-release",
         "create-translation": "rui-create-translation",
+        "dev": "pluggable-widgets-tools start:web",
+        "e2e": "run-e2e ci",
+        "e2edev": "run-e2e dev --with-preps",
+        "format": "pluggable-widgets-tools format",
+        "lint": "eslint --ext .jsx,.js,.ts,.tsx src/",
         "publish-marketplace": "rui-publish-marketplace",
-        "verify": "rui-verify-package-format",
-        "update-changelog": "rui-update-changelog-widget"
+        "release": "pluggable-widgets-tools release:web",
+        "start": "pluggable-widgets-tools start:server",
+        "test": "jest --projects jest.config.js",
+        "update-changelog": "rui-update-changelog-widget",
+        "verify": "rui-verify-package-format"
+    },
+    "dependencies": {
+        "classnames": "^2.3.2",
+        "downshift": "^7.6.2",
+        "match-sorter": "^6.3.4"
     },
     "devDependencies": {
         "@mendix/automation-utils": "workspace:*",
@@ -57,10 +61,5 @@
         "@mendix/widget-plugin-platform": "workspace:*",
         "@mendix/widget-plugin-test-utils": "workspace:*",
         "cross-env": "^7.0.3"
-    },
-    "dependencies": {
-        "classnames": "^2.3.2",
-        "downshift": "^7.6.2",
-        "match-sorter": "^6.3.4"
     }
 }

packages/pluggableWidgets/combobox-web/src/components/SingleSelection/SingleSelection.tsx

@@ -44,7 +44,7 @@ export function SingleSelection({
 
     const selectedItemCaption = useMemo(
         () => selector.caption.render(selectedItem, "label"),
-        [selectedItem, selector.status, selector.caption.emptyCaption]
+        [selectedItem, selector.status, selector.caption.emptyCaption, selector.caption.value?.value]
     );
 
     return (

packages/pluggableWidgets/combobox-web/src/helpers/Association/AssociationSimpleCaptionsProvider.tsx

@@ -1,4 +1,11 @@
-import { DynamicValue, ListAttributeValue, ListExpressionValue, ListWidgetValue, ObjectItem } from "mendix";
+import {
+    DynamicValue,
+    EditableValue,
+    ListAttributeValue,
+    ListExpressionValue,
+    ListWidgetValue,
+    ObjectItem
+} from "mendix";
 import { ReactNode, createElement } from "react";
 import { OptionsSourceAssociationCustomContentTypeEnum } from "../../../typings/ComboboxProps";
 import { CaptionPlacement, CaptionsProvider } from "../types";
@@ -16,6 +23,7 @@ export class AssociationSimpleCaptionsProvider implements CaptionsProvider {
     private formatter?: ListExpressionValue<string> | ListAttributeValue<string>;
     protected customContent?: ListWidgetValue;
     protected customContentType: OptionsSourceAssociationCustomContentTypeEnum = "no";
+    value?: DynamicValue<string> | EditableValue<string>;
     emptyCaption = "";
 
     constructor(private optionsMap: Map<string, ObjectItem>) {}
@@ -44,12 +52,12 @@ export class AssociationSimpleCaptionsProvider implements CaptionsProvider {
             return this.unavailableCaption;
         }
 
-        const captionValue = this.formatter.get(item);
-        if (!captionValue || captionValue.status === "unavailable") {
+        this.value = this.formatter.get(item);
+        if (!this.value || this.value.status === "unavailable") {
             return this.unavailableCaption;
         }
 
-        return captionValue.value ?? "";
+        return this.value.value ?? "";
     }
 
     getCustomContent(value: string | null): ReactNode | null {

packages/pluggableWidgets/combobox-web/src/helpers/Database/DatabaseCaptionsProvider.tsx

@@ -1,4 +1,11 @@
-import { DynamicValue, ListAttributeValue, ListExpressionValue, ListWidgetValue, ObjectItem } from "mendix";
+import {
+    DynamicValue,
+    EditableValue,
+    ListAttributeValue,
+    ListExpressionValue,
+    ListWidgetValue,
+    ObjectItem
+} from "mendix";
 import { ReactNode, createElement } from "react";
 import { OptionsSourceAssociationCustomContentTypeEnum } from "../../../typings/ComboboxProps";
 import { CaptionPlacement, CaptionsProvider } from "../types";
@@ -19,6 +26,7 @@ export class DatabaseCaptionsProvider implements CaptionsProvider {
     protected customContent?: ListWidgetValue;
     protected customContentType: OptionsSourceAssociationCustomContentTypeEnum = "no";
     attribute?: ListAttributeValue<string | Big>;
+    value?: DynamicValue<string> | EditableValue<string>;
     emptyCaption = "";
     overrideCaption: string | null | undefined = undefined;
 
@@ -55,12 +63,12 @@ export class DatabaseCaptionsProvider implements CaptionsProvider {
         if (!item) {
             return this.unavailableCaption;
         }
-        const captionValue = this.formatter?.get(item);
-        if (captionValue?.status === "unavailable") {
+        this.value = this.formatter?.get(item);
+        if (this.value?.status === "unavailable") {
             return this.unavailableCaption;
         }
 
-        return captionValue?.value ?? "";
+        return this.value?.value ?? "";
     }
 
     getCustomContent(value: string | null): ReactNode | null {

packages/pluggableWidgets/combobox-web/src/helpers/types.ts

@@ -9,7 +9,7 @@ import {
     SelectionMethodEnum
 } from "../../typings/ComboboxProps";
 import { ThreeStateCheckBoxEnum } from "@mendix/widget-plugin-component-kit/ThreeStateCheckBox";
-import { ListValue } from "mendix";
+import { DynamicValue, EditableValue, ListValue } from "mendix";
 
 export type Status = "unavailable" | "loading" | "available";
 export type CaptionPlacement = "label" | "options";
@@ -21,6 +21,7 @@ export interface CaptionsProvider {
     get(value: string | null): string;
     render(value: (string | null) | (number | null), placement?: CaptionPlacement, htmlFor?: string): ReactNode;
     emptyCaption: string;
+    value?: DynamicValue<string> | EditableValue<string>;
 }
 export interface ValuesProvider<T> {
     get(key: string | null): T | undefined;