fix: combobox database customcontent and value attribute runtime error

Author: gjulivan

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 database optional value attribute breaks on runtime when not being set.
+
+-   We fixed an issue where custom content not shown on design preview and runtime for database datasource.
+
 ## [2.1.0] - 2024-10-29
 
 ### Added

packages/pluggableWidgets/combobox-web/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/combobox-web",
     "widgetName": "Combobox",
-    "version": "2.1.0",
+    "version": "2.1.1",
     "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.editorPreview.tsx

@@ -7,6 +7,7 @@ import { SingleSelector, SelectionBaseProps } from "./helpers/types";
 import "./ui/Combobox.scss";
 import { AssociationPreviewSelector } from "./helpers/Association/Preview/AssociationPreviewSelector";
 import { StaticPreviewSelector } from "./helpers/Static/Preview/StaticPreviewSelector";
+import { DatabasePreviewSelector } from "./helpers/Database/Preview/DatabasePreviewSelector";
 
 export const preview = (props: ComboboxPreviewProps): ReactElement => {
     const id = generateUUID().toString();
@@ -44,6 +45,9 @@ export const preview = (props: ComboboxPreviewProps): ReactElement => {
         if (props.source === "static") {
             return new StaticPreviewSelector(props);
         }
+        if (props.source === "database") {
+            return new DatabasePreviewSelector(props);
+        }
         return new AssociationPreviewSelector(props);
     }, [props]);
     return (

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

@@ -21,18 +21,21 @@ export class DatabaseValuesProvider implements ValuesProvider<string | Big> {
         if (key === null) {
             return this.emptyValue?.value;
         }
-        if (!this.attribute) {
-            throw new Error("DatabaseValuesProvider: no formatter available.");
-        }
+
         const item = this.optionsMap.get(key);
         if (!item) {
             return this.emptyValue?.value;
         }
-        const value = this.attribute.get(item);
-        if (value.status === "unavailable") {
-            return this.emptyValue?.value;
+
+        if (this.attribute) {
+            const value = this.attribute.get(item);
+            if (value.status === "unavailable") {
+                return this.emptyValue?.value;
+            }
+            return value.value;
         }
-        return value.value;
+
+        return this.emptyValue?.value;
     }
 
     getEmptyValue(): string | Big | undefined {

packages/pluggableWidgets/combobox-web/src/helpers/Database/Preview/DatabasePreviewSelector.ts

@@ -0,0 +1,54 @@
+import {
+    ComboboxContainerProps,
+    ComboboxPreviewProps,
+    LoadingTypeEnum,
+    OptionsSourceAssociationCustomContentTypeEnum
+} from "../../../../typings/ComboboxProps";
+import { CaptionsProvider, OptionsProvider, SingleSelector, Status } from "../../../helpers/types";
+import { getDatasourcePlaceholderText } from "../../../helpers/utils";
+import { AssociationPreviewCaptionsProvider } from "../../Association/Preview/AssociationPreviewCaptionsProvider";
+import { AssociationPreviewOptionsProvider } from "../../Association/Preview/AssociationPreviewOptionsProvider";
+
+export class DatabasePreviewSelector implements SingleSelector {
+    attributeType?: "string" | "big" | "boolean" | "date";
+    caption: CaptionsProvider;
+    clearable: boolean;
+    currentId: string | null;
+    customContentType: OptionsSourceAssociationCustomContentTypeEnum;
+    lazyLoading?: boolean = false;
+    loadingType?: LoadingTypeEnum = "skeleton";
+    options: OptionsProvider;
+    readOnly: boolean;
+    selectorType?: "context" | "database" | "static";
+    status: Status = "available";
+    type = "single" as const;
+    validation?: string;
+
+    onEnterEvent?: () => void;
+    onLeaveEvent?: () => void;
+
+    constructor(props: ComboboxPreviewProps) {
+        this.caption = new AssociationPreviewCaptionsProvider(new Map());
+        this.clearable = props.clearable;
+        this.currentId = getDatasourcePlaceholderText(props);
+        this.customContentType = props.optionsSourceDatabaseCustomContentType;
+        this.options = new AssociationPreviewOptionsProvider(this.caption, new Map());
+        this.readOnly = props.readOnly;
+        (this.caption as AssociationPreviewCaptionsProvider).updatePreviewProps({
+            customContentRenderer: props.optionsSourceDatabaseCustomContent.renderer,
+            customContentType: props.optionsSourceDatabaseCustomContentType
+        });
+
+        if (props.optionsSourceDatabaseCustomContentType === "listItem") {
+            // always render custom content dropzone in design mode if type is options only
+            this.customContentType = "yes";
+        }
+    }
+
+    setValue(_: string | null): void {
+        throw new Error("Method not implemented.");
+    }
+    updateProps(_: ComboboxContainerProps): void {
+        throw new Error("Method not implemented.");
+    }
+}

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

@@ -45,8 +45,8 @@ export function extractDatabaseProps(props: ComboboxContainerProps): ExtractionR
     const emptyOption = props.emptyOptionText;
     const emptyValue = props.optionsSourceDatabaseDefaultValue;
     const clearable = props.clearable;
-    const customContent = props.optionsSourceAssociationCustomContent;
-    const customContentType = props.optionsSourceAssociationCustomContentType;
+    const customContent = props.optionsSourceDatabaseCustomContent;
+    const customContentType = props.optionsSourceDatabaseCustomContentType;
     const valueSourceAttribute = props.optionsSourceDatabaseValueAttribute;
     const lazyLoading = (props.lazyLoading && props.optionsSourceDatabaseCaptionType !== "expression") ?? false;
     const loadingType = props.loadingType;
@@ -73,10 +73,6 @@ export function extractDatabaseProps(props: ComboboxContainerProps): ExtractionR
         }
     }
 
-    if (!valueSourceAttribute && props.optionsSourceDatabaseItemSelection?.type !== "Multi") {
-        throw new Error("'valueAttribute' is not defined");
-    }
-
     return {
         targetAttribute,
         captionProvider: captionType === "attribute" ? captionAttribute : captionExpression,

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