[WC-3015] Improve dropdown filter (#1732)

Author: r0b1n

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

@@ -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-date-filter-web/e2e/DataGridDateFilter.spec.js-snapshots/dataGridDateFilter-chromium-linux.png

@@ -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.
+
 ## [3.0.3] - 2025-07-24
 
 ### Fixed

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

@@ -26,25 +26,25 @@ test.describe("datagrid-dropdown-filter-web", () => {
 
     test.describe("using enumeration as attribute", () => {
         test("shows the expected result", async ({ page }) => {
-            await page.click(".mx-name-datagrid1 .mx-name-dataGridDrop_downFilter1");
-            await page.waitForSelector(".widget-dropdown-filter-menu-slot > ul > li:nth-child(2)");
-            await page.click(".widget-dropdown-filter-menu-slot > ul > li:nth-child(2)");
+            await page.locator(".mx-name-datagrid1 .mx-name-dataGridDrop_downFilter1").click({ delay: 1 });
+            await page.waitForSelector(".widget-dropdown-filter-menu-slot > ul > li:nth-child(1)");
+            await page.locator(".widget-dropdown-filter-menu-slot > ul > li:nth-child(1)").click({ delay: 1 });
             await page.waitForTimeout(300); // wait for filter to apply
-            await page.click("#DataGrid4-column0");
+            await page.locator("#DataGrid4-column0").click({ delay: 1 });
             const cells = await page.$$eval(".mx-name-datagrid1 .td", elements =>
                 elements.map(element => element.textContent)
             );
             await expect(cells).toEqual(["10", "test", "test", "Yes", ""]);
         });
 
         test("shows the expected result with multiple selected items", async ({ page }) => {
-            await page.click(".mx-name-datagrid1 .mx-name-dataGridDrop_downFilter1");
+            await page.locator(".mx-name-datagrid1 .mx-name-dataGridDrop_downFilter1").click({ delay: 1 });
+            await page.waitForSelector(".widget-dropdown-filter-menu-slot > ul > li:nth-child(1)");
+            await page.locator(".widget-dropdown-filter-menu-slot > ul > li:nth-child(1)").click({ delay: 1 });
             await page.waitForSelector(".widget-dropdown-filter-menu-slot > ul > li:nth-child(2)");
-            await page.click(".widget-dropdown-filter-menu-slot > ul > li:nth-child(2)");
-            await page.waitForSelector(".widget-dropdown-filter-menu-slot > ul > li:nth-child(3)");
-            await page.click(".widget-dropdown-filter-menu-slot > ul > li:nth-child(3)");
+            await page.locator(".widget-dropdown-filter-menu-slot > ul > li:nth-child(2)").click({ delay: 1 });
             await page.waitForTimeout(300); // wait for filter to apply
-            await page.click("#DataGrid4-column0");
+            await page.locator("#DataGrid4-column0").click({ delay: 1 });
             const cells = await page.$$eval(".mx-name-datagrid1 .td", elements =>
                 elements.map(element => element.textContent)
             );
@@ -54,20 +54,20 @@ test.describe("datagrid-dropdown-filter-web", () => {
 
     test.describe("using boolean as attribute", () => {
         test("shows the expected result", async ({ page }) => {
-            await page.getByRole("combobox", { name: "Empty" }).click();
+            await page.getByRole("combobox", { name: "Active column filter" }).click({ delay: 1 });
             const dropdownItem = await page.locator(".widget-dropdown-filter-menu-slot > ul > li:nth-child(3)");
             await expect(dropdownItem).toHaveText("No");
-            await dropdownItem.click();
-            await page.locator("#DataGrid4-column1").click();
+            await dropdownItem.click({ delay: 1 });
+            await page.locator("#DataGrid4-column1").click({ delay: 1 });
             const cells = await page.locator(".mx-name-datagrid1 .tr");
             expect(cells).toHaveCount(1);
         });
 
         test("shows no results when no items selected", async ({ page }) => {
-            await page.getByRole("combobox", { name: "Empty" }).click();
+            await page.getByRole("combobox", { name: "Active column filter" }).click({ delay: 1 });
             const dropdownItem = await page.locator(".widget-dropdown-filter-menu-slot > ul > li:nth-child(1)"); //the first item means none selected
-            await dropdownItem.click();
-            await page.locator("#DataGrid4-column1").click();
+            await dropdownItem.click({ delay: 1 });
+            await page.locator("#DataGrid4-column1").click({ delay: 1 });
             const cells = await page.locator(".mx-name-datagrid1 .tr");
             expect(cells).toHaveCount(4);
         });

packages/pluggableWidgets/datagrid-dropdown-filter-web/e2e/DataGridDropDownFilter.spec.js

@@ -15,25 +15,25 @@ test.describe("datagrid-dropdown-filter-web", () => {
         test("show list of Companies with empty option on top of the list", async ({ page }) => {
             const menu = () => page.locator("text=FMC Corp");
 
-            await page.locator(".mx-name-drop_downFilter2").click();
+            await page.locator(".mx-name-drop_downFilter2").click({ delay: 1 });
             await expect(menu()).toBeVisible();
             const list = page.locator(".widget-dropdown-filter-menu-slot > ul > li");
             await expect(list).toHaveCount(21);
-            await expect(list.nth(0)).toHaveText("None");
+            await expect(list.nth(0)).toHaveText("Nada");
             await expect(list.nth(2)).toHaveText("FMC Corp");
             await expect(list.nth(20)).toHaveText("PETsMART Inc");
         });
 
         test("set value after option is clicked", async ({ page }) => {
-            const select = () => page.getByRole("columnheader", { name: "sort Company" }).getByLabel("Search");
+            const select = () => page.getByRole("combobox", { name: "Company column filter" });
             const toggle = page.locator(".widget-dropdown-filter-toggle");
             const menu = () => page.locator("text=FMC Corp");
             const option1 = () => page.getByRole("option", { name: "Brown-Forman Corporation" });
-            const clickOutside = async () => page.locator("body").click();
+            const clickOutside = async () => page.locator("body").click({ delay: 1 });
 
-            await select().click();
+            await select().click({ delay: 1 });
             await expect(menu()).toBeVisible();
-            await option1().click();
+            await option1().click({ delay: 1 });
             await expect(toggle.nth(3)).toHaveText("Brown-Forman Corporation");
             await clickOutside();
             await expect(menu()).not.toBeVisible();
@@ -44,26 +44,29 @@ test.describe("datagrid-dropdown-filter-web", () => {
     });
 
     test.describe("multiselect", () => {
+        let select;
+        let menu;
+        test.beforeEach(async ({ page }) => {
+            select = () => page.getByRole("combobox", { name: "Role column filter" });
+            menu = () => select().getByRole("listbox");
+        });
         test("shows list of Roles", async ({ page }) => {
-            const select = () => page.getByRole("columnheader", { name: "Roles" }).getByLabel("Search");
-            const menu = () => page.locator("text=Economist");
-            const option1 = () => page.getByRole("option", { name: "Economist" });
-            const option2 = () => page.getByRole("option", { name: "Public librarian" });
-            const option3 = () => page.getByRole("option", { name: "Prison officer" });
+            const option1 = () => menu().getByRole("option", { name: "Economist" });
+            const option2 = () => menu().getByRole("option", { name: "Public librarian" });
+            const option3 = () => menu().getByRole("option", { name: "Prison officer" });
 
-            await select().click();
+            await select().click({ delay: 1 });
             await expect(menu().first()).toBeVisible();
             await expect(option1()).toBeVisible();
             await expect(option2()).toBeVisible();
             await expect(option3()).toBeVisible();
         });
 
         test("does filtering when option is checked", async ({ page }) => {
-            const select = () => page.getByRole("columnheader", { name: "Roles" }).getByLabel("Search");
-            const option2 = () => page.getByRole("option", { name: "Public librarian" });
+            const option2 = () => menu().getByRole("option", { name: "Public librarian" });
 
-            await select().click();
-            await option2().click();
+            await select().click({ delay: 1 });
+            await option2().click({ delay: 1 });
             const rows = page.locator(".mx-name-dataGrid21 .tr");
             await expect(rows).toHaveCount(5); // 4 rows + 1 header row
         });
@@ -75,7 +78,7 @@ test.describe("datagrid-dropdown-filter-web", () => {
             const menu = () => page.getByRole("option", { name: "Environmental scientist" });
             const clickOutside = async () => (await page.locator("body")).click();
 
-            await select().click();
+            await select().click({ delay: 1 });
             const checkedOptions = await menu().locator("input:checked");
             await expect(checkedOptions).toHaveCount(0);
             await clickOutside();
@@ -88,8 +91,8 @@ test.describe("datagrid-dropdown-filter-web", () => {
             const menu = () => page.getByRole("option", { name: "Environmental scientist" });
             const option1 = () => page.getByRole("option", { name: "Environmental scientist" });
 
-            await select().click();
-            await option1().click();
+            await select().click({ delay: 1 });
+            await option1().click({ delay: 1 });
             const checkedOptions = await menu().locator("input:checked");
             await expect(checkedOptions).toHaveCount(1);
             await expect(checkedOptions.first()).toBeChecked();
@@ -106,9 +109,9 @@ test.describe("datagrid-dropdown-filter-web", () => {
             const option1 = () => page.getByRole("option", { name: "Environmental scientist" });
             const option2 = () => page.getByRole("option", { name: "Trader" });
 
-            await select().click();
-            await option1().click();
-            await option2().click();
+            await select().click({ delay: 1 });
+            await option1().click({ delay: 1 });
+            await option2().click({ delay: 1 });
             const checkedOptions = await menu().locator("input:checked");
             await expect(checkedOptions).toHaveCount(2);
             await expect(checkedOptions.first()).toBeChecked();

packages/pluggableWidgets/datagrid-dropdown-filter-web/e2e/DataGridDropDownFilter.spec.js-snapshots/dataGridDropDownFilter-undefined-chromium-linux.png

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/datagrid-dropdown-filter-web",
     "widgetName": "DatagridDropdownFilter",
-    "version": "3.0.3",
+    "version": "3.0.4",
     "description": "",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",
@@ -23,7 +23,7 @@
     },
     "testProject": {
         "githubUrl": "https://github.com/mendix/testProjects",
-        "branchName": "datagrid-dropdown-filter-web/data-widgets-3.0"
+        "branchName": "datagrid-dropdown-filter-web/dw3.0-dropdown-rework"
     },
     "scripts": {
         "build": "pluggable-widgets-tools build:ts",

packages/pluggableWidgets/datagrid-dropdown-filter-web/e2e/DataGridDropDownFilterAssociation.spec.js

@@ -22,6 +22,8 @@ export function getProperties(values: DatagridDropdownFilterPreviewProps, defaul
     if (values.filterable) {
         hidePropertyIn(defaultProperties, values, "clearable");
         hidePropertyIn(defaultProperties, values, "emptyOptionCaption");
+    } else {
+        hidePropertyIn(defaultProperties, values, "filterInputPlaceholderCaption");
     }
 
     if (!values.filterable) {
@@ -89,7 +91,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/package.json

@@ -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.editorConfig.ts

@@ -124,6 +124,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>
@@ -162,13 +166,31 @@
                 </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>