[WC-3048]: Fix combobox caption issue

packages/pluggableWidgets/combobox-web/CHANGELOG.md

@@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We fixed an issue where combobox does not show initial caption correctly for database source.
+
+-   We fixed an issue where combobox caption expression does not load correctly.
+
 ## [1.7.1] - 2025-01-28
 
 ### Fixed

packages/pluggableWidgets/combobox-web/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/combobox-web",
     "widgetName": "Combobox",
-    "version": "1.7.1",
+    "version": "1.7.2",
     "description": "Configurable Combo box widget with suggestions and autocomplete.",
     "copyright": "© Mendix Technology BV 2024. All rights reserved.",
     "license": "Apache-2.0",
@@ -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/Combobox.tsx

@@ -2,12 +2,12 @@ import { createElement, ReactElement } from "react";
 
 import { ComboboxContainerProps } from "../typings/ComboboxProps";
 
+import { MultiSelection } from "./components/MultiSelection/MultiSelection";
+import { Placeholder } from "./components/Placeholder";
+import { SingleSelection } from "./components/SingleSelection/SingleSelection";
 import { SelectionBaseProps } from "./helpers/types";
 import { useActionEvents } from "./hooks/useActionEvents";
 import { useGetSelector } from "./hooks/useGetSelector";
-import { Placeholder } from "./components/Placeholder";
-import { MultiSelection } from "./components/MultiSelection/MultiSelection";
-import { SingleSelection } from "./components/SingleSelection/SingleSelection";
 
 import "./ui/Combobox.scss";
 

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

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

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

@@ -13,7 +13,7 @@ interface Props {
 
 export class AssociationSimpleCaptionsProvider implements CaptionsProvider {
     private unavailableCaption = "<...>";
-    private formatter?: ListExpressionValue<string> | ListAttributeValue<string>;
+    formatter?: ListExpressionValue<string> | ListAttributeValue<string>;
     protected customContent?: ListWidgetValue;
     protected customContentType: OptionsSourceAssociationCustomContentTypeEnum = "no";
     emptyCaption = "";

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

@@ -15,7 +15,7 @@ interface Props {
 
 export class DatabaseCaptionsProvider implements CaptionsProvider {
     private unavailableCaption = "<...>";
-    private formatter?: ListExpressionValue<string> | ListAttributeValue<string>;
+    formatter?: ListExpressionValue<string> | ListAttributeValue<string>;
     protected customContent?: ListWidgetValue;
     protected customContentType: OptionsSourceAssociationCustomContentTypeEnum = "no";
     attribute?: ListAttributeValue<string | Big>;
@@ -56,7 +56,7 @@ export class DatabaseCaptionsProvider implements CaptionsProvider {
             return this.unavailableCaption;
         }
         const captionValue = this.formatter?.get(item);
-        if (captionValue?.status === "unavailable") {
+        if (!captionValue || captionValue.status === "unavailable") {
             return this.unavailableCaption;
         }
 

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

@@ -1,3 +1,5 @@
+import { ThreeStateCheckBoxEnum } from "@mendix/widget-plugin-component-kit/ThreeStateCheckBox";
+import { ListAttributeValue, ListExpressionValue, ListValue } from "mendix";
 import { ReactNode } from "react";
 import {
     ComboboxContainerProps,
@@ -8,8 +10,6 @@ import {
     SelectedItemsStyleEnum,
     SelectionMethodEnum
 } from "../../typings/ComboboxProps";
-import { ThreeStateCheckBoxEnum } from "@mendix/widget-plugin-component-kit/ThreeStateCheckBox";
-import { 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;
+    formatter?: ListExpressionValue<string> | ListAttributeValue<string>;
 }
 export interface ValuesProvider<T> {
     get(key: string | null): T | undefined;

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