fix: combobox auto width not working properly

Author: gjulivan

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 combobox failed to render a proper width on auto-fit container.
+
 ## [2.5.0] - 2025-08-12
 
 ### Added

packages/pluggableWidgets/combobox-web/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/combobox-web",
     "widgetName": "Combobox",
-    "version": "2.5.0",
+    "version": "2.5.1",
     "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/__tests__/__snapshots__/MultiSelection.spec.tsx.snap

@@ -6,7 +6,7 @@ exports[`Combo box (Association) renders combobox widget 1`] = `
     class="widget-combobox"
   >
     <div
-      class="widget-combobox-input-container form-control"
+      class="widget-combobox-input-container form-control widget-combobox-multiselect"
       id="downshift-0-toggle-button"
       tabindex="-1"
     >
@@ -116,7 +116,7 @@ exports[`Combo box (Association) toggles combobox menu on: input CLICK(focus) /
     class="widget-combobox"
   >
     <div
-      class="widget-combobox-input-container form-control"
+      class="widget-combobox-input-container form-control widget-combobox-multiselect"
       id="downshift-2-toggle-button"
       tabindex="-1"
     >
@@ -226,7 +226,7 @@ exports[`Combo box (Association) toggles combobox menu on: input TOGGLE BUTTON 1
     class="widget-combobox"
   >
     <div
-      class="widget-combobox-input-container form-control"
+      class="widget-combobox-input-container form-control widget-combobox-multiselect"
       id="downshift-6-toggle-button"
       tabindex="-1"
     >

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

@@ -13,11 +13,21 @@ interface ComboboxWrapperProps extends PropsWithChildren {
     getToggleButtonProps: (options?: UseComboboxGetToggleButtonPropsOptions | undefined) => any;
     validation?: string;
     isLoading: boolean;
+    isMultiselectActive?: boolean;
 }
 
 export const ComboboxWrapper = forwardRef(
     (props: ComboboxWrapperProps, ref: RefObject<HTMLDivElement>): ReactElement => {
-        const { isOpen, readOnly, readOnlyStyle, getToggleButtonProps, validation, children, isLoading } = props;
+        const {
+            isOpen,
+            readOnly,
+            readOnlyStyle,
+            getToggleButtonProps,
+            validation,
+            children,
+            isLoading,
+            isMultiselectActive
+        } = props;
         const { id, onClick } = getToggleButtonProps();
 
         return (
@@ -29,7 +39,8 @@ export const ComboboxWrapper = forwardRef(
                         "widget-combobox-input-container-active": isOpen,
                         "widget-combobox-input-container-disabled": readOnly,
                         "form-control-static": readOnly && readOnlyStyle === "text",
-                        "form-control": !readOnly || readOnlyStyle !== "text"
+                        "form-control": !readOnly || readOnlyStyle !== "text",
+                        "widget-combobox-multiselect": isMultiselectActive
                     })}
                     id={id}
                     onClick={onClick}

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

@@ -95,6 +95,7 @@ export function MultiSelection({
                 getToggleButtonProps={getToggleButtonProps}
                 validation={selector.validation}
                 isLoading={lazyLoading && selector.options.isLoading}
+                isMultiselectActive={selectedItems?.length > 0}
             >
                 <div
                     className={classNames(

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

packages/pluggableWidgets/combobox-web/src/ui/Combobox.scss

@@ -150,7 +150,9 @@ $cb-skeleton-dark: #d2d2d2;
                 background-color: transparent;
             }
         }
+    }
 
+    .widget-combobox-multiselect {
         &:not(.widget-combobox-input-container-active) {
             .widget-combobox-input {
                 width: 1px;