[WC-2897] Disable Select All if there are no items

packages/modules/data-widgets/src/themesource/datawidgets/web/_three-state-checkbox.scss

@@ -11,6 +11,11 @@ input[type="checkbox"].three-state-checkbox {
     -webkit-appearance: none;
     transform: translateZ(0);
 
+    &:disabled {
+        // reset default disabled cursor
+        cursor: initial;
+    }
+
     &:before,
     &:after {
         position: absolute;
@@ -41,7 +46,7 @@ input[type="checkbox"].three-state-checkbox {
     }
 
     &:indeterminate:after {
-        // Checkmark
+        // Dash-mark for indeterminate
         width: 8px;
         height: 4px;
         margin: 5px 4px;
@@ -72,13 +77,13 @@ input[type="checkbox"].three-state-checkbox {
         background-color: #f8f8f8;
     }
 
+    &:indeterminate:disabled:before,
     &:checked:disabled:before {
         border-color: transparent;
         background-color: rgba(#264ae5, 0.4);
     }
 
-    &:disabled:after,
-    &:checked:disabled:after {
+    &:disabled:after {
         border-color: #f8f8f8;
     }
 

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]
 
+### Changed
+
+- We improved the combobox behavior by disabling the Select All checkbox when no items are available.
+
 ## [2.3.0] - 2025-03-19
 
 ### Changed

packages/pluggableWidgets/combobox-web/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/combobox-web",
     "widgetName": "Combobox",
-    "version": "2.3.0",
+    "version": "2.3.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/components/MultiSelection/MultiSelection.tsx

@@ -163,6 +163,7 @@ export function MultiSelection({
                 menuHeaderContent={
                     selector.selectAllButton ? (
                         <SelectAllButton
+                            disabled={items.length === 0}
                             value={isOptionsSelected}
                             id={`${options.inputId}-select-all-button`}
                             ariaLabel={a11yConfig.ariaLabels.selectAll}

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

@@ -6,21 +6,25 @@ import { CaptionContent } from "../../helpers/utils";
 
 interface SelectAllButtonProps extends Partial<UseComboboxPropGetters<string>> {
     id?: string;
+    disabled?: boolean;
     ariaLabel?: string;
     value: ThreeStateCheckBoxEnum;
     onChange?: () => void;
 }
 
-export function SelectAllButton({ id, ariaLabel, value, onChange }: SelectAllButtonProps): ReactElement {
+export function SelectAllButton({ id, disabled, ariaLabel, value, onChange }: SelectAllButtonProps): ReactElement {
     return (
         <Fragment>
             <span
                 className={classNames(
                     "widget-combobox-menu-header-select-all-button",
-                    "widget-combobox-icon-container"
+                    "widget-combobox-icon-container",
+                    {
+                        "widget-combobox-menu-header-select-all-button-disabled": disabled
+                    }
                 )}
             >
-                <ThreeStateCheckBox value={value} id={id} onChange={onChange} />
+                <ThreeStateCheckBox value={disabled ? "none" : value} id={id} onChange={onChange} disabled={disabled} />
             </span>
             {ariaLabel ? (
                 // empty onclick function is being set to allow label clicking

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

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

@@ -77,6 +77,16 @@ $cb-skeleton-dark: #d2d2d2;
                 content: "";
                 border-color: var(--btn-default-bg-hover, $cb-hover-color);
             }
+
+            &-select-all-button {
+                & + label {
+                    transition: color 0.2s ease-in-out;
+                }
+
+                &-disabled + label {
+                    color: var(--color-default-dark, $cb-disabled-text-color);
+                }
+            }
         }
 
         &-footer {

packages/shared/widget-plugin-component-kit/src/ThreeStateCheckBox.tsx

@@ -4,11 +4,12 @@ export type ThreeStateCheckBoxEnum = "all" | "some" | "none";
 
 export interface ThreeStateCheckBoxProps {
     id?: string;
+    disabled?: boolean;
     value: ThreeStateCheckBoxEnum;
     onChange?: () => void;
 }
 
-export function ThreeStateCheckBox({ id, value, onChange }: ThreeStateCheckBoxProps): ReactElement {
+export function ThreeStateCheckBox({ id, disabled, value, onChange }: ThreeStateCheckBoxProps): ReactElement {
     const checkboxRef = useRef<HTMLInputElement | null>(null);
     useEffect(() => {
         if (!checkboxRef.current) {
@@ -28,6 +29,7 @@ export function ThreeStateCheckBox({ id, value, onChange }: ThreeStateCheckBoxPr
             className="three-state-checkbox"
             ref={checkboxRef}
             checked={value !== "none"}
+            disabled={disabled}
             onChange={onChange}
         />
     );