chore: backport dropdown improvements

Author: r0b1n

packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid-dropdown-filter.scss

@@ -1,6 +1,6 @@
 @mixin scroll-shadow {
     background:
-        /* Shadow Cover TOP */
+            /* Shadow Cover TOP */
         linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top,
         /* Shadow Cover BOTTOM */ linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom,
         /* Shadow TOP */ linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(197, 197, 197, 0.6)) center top,
@@ -138,7 +138,6 @@ $root: ".widget-dropdown-filter";
     &-clear {
         @include btn-with-cross;
         align-items: center;
-        align-self: center;
         display: flex;
         flex-shrink: 0;
         justify-self: end;
@@ -150,6 +149,11 @@ $root: ".widget-dropdown-filter";
         &:has(+ #{$root}-toggle) {
             border-inline-end: 1px solid var(--gray, #787d87);
         }
+
+        &:focus-visible {
+            outline-offset: -2px;
+            outline: var(--brand-primary, $brand-primary) solid 1px;
+        }
     }
 
     &-state-icon {
@@ -262,9 +266,13 @@ $root: ".widget-dropdown-filter";
         justify-content: center;
         line-height: 1.334;
         padding: var(--wdf-tag-padding);
+        margin: var(--spacing-smallest, 2px);
         &:focus-visible {
             outline: var(--brand-primary, #264ae5) auto 1px;
         }
+        &:focus {
+            background-color: var(--color-primary-light, $color-primary-light);
+        }
     }
 
     #{$root}-input {
@@ -273,6 +281,14 @@ $root: ".widget-dropdown-filter";
         width: initial;
     }
 
+    &:not(:focus-within):not([data-empty]) {
+        #{$root}-input {
+            opacity: 0;
+            flex-shrink: 1;
+            min-width: 1px;
+        }
+    }
+
     #{$root}-clear {
         border-color: transparent;
     }

packages/pluggableWidgets/datagrid-dropdown-filter-web/CHANGELOG.md

@@ -6,6 +6,16 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We enhanced dropdown widget customization by separating texts for empty selection, empty option caption, and input placeholder. This change allows for more granular control over the widget's text configurations.
+
+- We improved dropdown widget usability with enhanced keyboard navigation, visual feedback, and interaction behavior.
+
+### Breaking changes
+
+- Text configurations for empty option, empty selection, and input placeholder need to be reviewed and reconfigured.
+
 ## [2.10.1] - 2025-04-16
 
 ### Fixed

packages/pluggableWidgets/datagrid-dropdown-filter-web/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/datagrid-dropdown-filter-web",
     "widgetName": "DatagridDropdownFilter",
-    "version": "2.10.1",
+    "version": "2.32.0",
     "description": "",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.editorConfig.ts

@@ -20,6 +20,8 @@ export function getProperties(values: DatagridDropdownFilterPreviewProps, defaul
     if (values.filterable) {
         hidePropertyIn(defaultProperties, values, "clearable");
         hidePropertyIn(defaultProperties, values, "emptyOptionCaption");
+    } else {
+        hidePropertyIn(defaultProperties, values, "filterInputPlaceholderCaption");
     }
 
     if (!showSelectedItemsStyle) {
@@ -54,7 +56,7 @@ export const getPreview = (values: DatagridDropdownFilterPreviewProps, isDarkMod
                             text({
                                 fontColor: palette.text.secondary,
                                 italic: true
-                            })(values.emptyOptionCaption || " ")
+                            })(values.emptySelectionCaption || " ")
                         ],
                         grow: 1
                     } as ContainerProps,

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.editorPreview.tsx

@@ -10,10 +10,12 @@ function Preview(props: DatagridDropdownFilterPreviewProps): ReactElement {
     return (
         <Select
             className={props.class}
+            ariaLabel={props.ariaLabel}
             style={parseStyle(props.style)}
             options={[]}
             empty={!props.clearable}
             clearable={props.clearable}
+            showCheckboxes={false}
             value={getPreviewValue(props)}
             onClear={noop}
             useSelectProps={() => ({ items: [] })}
@@ -25,11 +27,7 @@ const noop = (): void => {};
 
 function getPreviewValue(props: DatagridDropdownFilterPreviewProps): string {
     let value = props.defaultValue;
-    if (!props.filterable) {
-        value ||= props.emptyOptionCaption || "Select";
-    } else {
-        value ||= "Search";
-    }
+    value ||= props.emptySelectionCaption || (props.filterable ? "Search" : "Select");
     return value;
 }
 

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.tsx

@@ -7,7 +7,7 @@ import { RefFilterContainer } from "./components/RefFilterContainer";
 
 function Container(props: DatagridDropdownFilterContainerProps & Select_FilterAPIv2): React.ReactElement {
     const commonProps = {
-        ariaLabel: props.ariaLabel?.value,
+        ariaLabel: props.ariaLabel?.value ?? "",
         className: props.class,
         tabIndex: props.tabIndex,
         styles: props.style,
@@ -16,7 +16,9 @@ function Container(props: DatagridDropdownFilterContainerProps & Select_FilterAP
         parentChannelName: props.parentChannelName,
         name: props.name,
         multiselect: props.multiSelect,
-        emptyCaption: props.emptyOptionCaption?.value,
+        emptyOptionCaption: props.emptyOptionCaption?.value ?? "",
+        emptySelectionCaption: props.emptySelectionCaption?.value ?? "",
+        placeholder: props.filterInputPlaceholderCaption?.value ?? "",
         defaultValue: props.defaultValue?.value,
         filterable: props.filterable,
         selectionMethod: props.selectionMethod,

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.xml

@@ -45,6 +45,10 @@
                 <property key="emptyOptionCaption" type="textTemplate" required="false">
                     <caption>Empty option caption</caption>
                     <description />
+                    <translations>
+                        <translation lang="en_US">None</translation>
+                        <translation lang="nl_NL">Niets</translation>
+                    </translations>
                 </property>
                 <property key="clearable" type="boolean" defaultValue="true">
                     <caption>Clearable</caption>
@@ -83,13 +87,32 @@
                 </property>
             </propertyGroup>
         </propertyGroup>
-        <propertyGroup caption="Accessibility">
+        <propertyGroup caption="Advanced">
             <propertyGroup caption="Accessibility">
                 <property key="ariaLabel" type="textTemplate" required="false">
                     <caption>Input caption</caption>
                     <description>Assistive technology will read this upon reaching the input element.</description>
                 </property>
             </propertyGroup>
+            <propertyGroup caption="Texts">
+                <property key="emptySelectionCaption" type="textTemplate" required="false">
+                    <caption>Empty selection caption</caption>
+                    <description>This text is shown if no options are selected. For example 'Select color' or 'No options are selected'.</description>
+                    <translations>
+                        <translation lang="en_US">Select</translation>
+                        <translation lang="nl_NL">Selecteer</translation>
+                    </translations>
+                </property>
+
+                <property key="filterInputPlaceholderCaption" type="textTemplate" required="false">
+                    <caption>Filter input placeholder</caption>
+                    <description>This text is shown as placeholder for filterable filters. For example 'Type to search'.</description>
+                    <translations>
+                        <translation lang="en_US">Search</translation>
+                        <translation lang="nl_NL">Zoeken</translation>
+                    </translations>
+                </property>
+            </propertyGroup>
         </propertyGroup>
     </properties>
 </widget>

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/RefFilterContainer.tsx

@@ -15,10 +15,12 @@ import { SelectedItemsStyleEnum, SelectionMethodEnum } from "../../typings/Datag
 import { useOnScrollBottom } from "@mendix/widget-plugin-hooks/useOnScrollBottom";
 
 export interface RefFilterContainerProps {
-    ariaLabel?: string;
+    ariaLabel: string;
     className?: string;
     defaultValue?: string;
-    emptyCaption?: string;
+    emptyOptionCaption: string;
+    emptySelectionCaption: string;
+    placeholder: string;
     filterStore: RefFilterStore;
     multiselect: boolean;
     name: string;
@@ -66,6 +68,7 @@ const SelectWidget = observer(function SelectWidget(props: RefFilterContainerPro
             showCheckboxes={ctrl1.multiselect}
             className={props.className}
             style={props.styles}
+            ariaLabel={props.ariaLabel}
         />
     );
 });
@@ -80,6 +83,8 @@ const ComboboxWidget = observer(function ComboboxWidget(props: RefFilterContaine
         <Combobox
             options={ctrl2.options}
             inputPlaceholder={ctrl2.inputPlaceholder}
+            emptyCaption={ctrl2.emptyCaption}
+            ariaLabel={props.ariaLabel}
             useComboboxProps={ctrl2.useComboboxProps}
             onClear={ctrl2.handleClear}
             onFocus={ctrl2.handleFocus}
@@ -109,6 +114,8 @@ const TagPickerWidget = observer(function TagPickerWidget(props: RefFilterContai
             onFocus={ctrl3.handleFocus}
             onMenuScroll={handleMenuScroll}
             inputPlaceholder={ctrl3.inputPlaceholder}
+            emptyCaption={ctrl3.emptyCaption}
+            ariaLabel={props.ariaLabel}
             empty={ctrl3.isEmpty}
             showCheckboxes={props.selectionMethod === "checkbox"}
             selectedStyle={props.selectedItemsStyle}

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/StaticFilterContainer.tsx

@@ -19,10 +19,12 @@ import { usePickerJSActions } from "@mendix/widget-plugin-filtering/helpers/useP
 import { useFrontendType } from "../hooks/useFrontendType";
 
 export interface StaticFilterContainerProps {
-    ariaLabel?: string;
+    ariaLabel: string;
     className?: string;
     defaultValue?: string;
-    emptyCaption?: string;
+    emptyOptionCaption: string;
+    emptySelectionCaption: string;
+    placeholder: string;
     filterOptions: FilterOptionsType[];
     filterStore: StaticSelectFilterStore;
     multiselect: boolean;
@@ -68,6 +70,7 @@ const SelectWidget = observer(function SelectWidget(props: StaticFilterContainer
             showCheckboxes={ctrl1.multiselect}
             className={props.className}
             style={props.styles}
+            ariaLabel={props.ariaLabel}
         />
     );
 });
@@ -81,6 +84,8 @@ const ComboboxWidget = observer(function ComboboxWidget(props: StaticFilterConta
         <Combobox
             options={ctrl2.options}
             inputPlaceholder={ctrl2.inputPlaceholder}
+            emptyCaption={ctrl2.emptyCaption}
+            ariaLabel={props.ariaLabel}
             useComboboxProps={ctrl2.useComboboxProps}
             onClear={ctrl2.handleClear}
             onFocus={ctrl2.handleFocus}
@@ -106,6 +111,8 @@ const TagPickerWidget = observer(function TagPickerWidget(props: StaticFilterCon
             onClear={ctrl3.handleClear}
             onBlur={ctrl3.handleBlur}
             inputPlaceholder={ctrl3.inputPlaceholder}
+            emptyCaption={ctrl3.emptyCaption}
+            ariaLabel={props.ariaLabel}
             empty={ctrl3.isEmpty}
             showCheckboxes={props.selectionMethod === "checkbox"}
             selectedStyle={props.selectedItemsStyle}

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/__tests__/DataGridDropdownFilter.spec.tsx

@@ -22,6 +22,9 @@ const commonProps = {
     groupKey: "dropdown-filter",
     filterable: false,
     clearable: true,
+    emptySelectionCaption: dynamicValue("Select"),
+    emptyOptionCaption: dynamicValue("None"),
+    ariaLabel: dynamicValue("AriaLabel"),
     selectionMethod: "checkbox" as const,
     selectedItemsStyle: "text" as const
 };
@@ -117,7 +120,7 @@ describe("Dropdown Filter", () => {
                         />
                     );
 
-                    expect(screen.getByRole("combobox")).toHaveAccessibleName("enum_value_1");
+                    expect(document.querySelector(".widget-dropdown-filter-toggle")).toHaveTextContent("enum_value_1");
                 });
 
                 it("don't sync defaultValue with state when defaultValue changes from undefined to string", async () => {
@@ -132,7 +135,7 @@ describe("Dropdown Filter", () => {
                     );
 
                     await waitFor(() => {
-                        expect(screen.getByRole("combobox")).toHaveAccessibleName("Select");
+                        expect(document.querySelector(".widget-dropdown-filter-toggle")).toHaveTextContent("Select");
                     });
 
                     // “Real” context causes widgets to re-renders multiple times, replicate this in mocked context.
@@ -156,7 +159,7 @@ describe("Dropdown Filter", () => {
                     );
 
                     await waitFor(() => {
-                        expect(screen.getByRole("combobox")).toHaveAccessibleName("Select");
+                        expect(document.querySelector(".widget-dropdown-filter-toggle")).toHaveTextContent("Select");
                     });
                 });
 
@@ -172,7 +175,7 @@ describe("Dropdown Filter", () => {
                         />
                     );
 
-                    expect(screen.getByRole("combobox")).toHaveAccessibleName("xyz");
+                    expect(screen.getByText("xyz", { selector: ".widget-dropdown-filter-toggle" })).toBeInTheDocument();
 
                     // “Real” context causes widgets to re-renders multiple times, replicate this in mocked context.
                     rerender(
@@ -195,7 +198,9 @@ describe("Dropdown Filter", () => {
                     );
 
                     await waitFor(() => {
-                        expect(screen.getByRole("combobox")).toHaveAccessibleName("xyz");
+                        expect(
+                            screen.getByText("xyz", { selector: ".widget-dropdown-filter-toggle" })
+                        ).toBeInTheDocument();
                     });
                 });
             });
@@ -471,8 +476,8 @@ describe("Dropdown Filter", () => {
                 <DatagridDropdownFilter {...commonProps} auto multiSelect={false} filterOptions={[]} />
             );
 
-            expect(fragment1().querySelector("button")?.getAttribute("aria-controls")).not.toBe(
-                fragment2().querySelector("button")?.getAttribute("aria-controls")
+            expect(fragment1().querySelector("div[role='combobox']")?.getAttribute("aria-controls")).not.toBe(
+                fragment2().querySelector("div[role='combobox']")?.getAttribute("aria-controls")
             );
         });