[WC-3059] Dropdown filter: title for tooltips and ellipsis overflow (#1819)

Author: r0b1n

automation/run-e2e/lib/update-test-project.mjs

@@ -6,29 +6,17 @@ import { join, resolve } from "node:path";
 import sh from "shelljs";
 import * as config from "./config.mjs";
 import { fetchGithubRestAPI, fetchWithReport, packageMeta, streamPipe, usetmp } from "./utils.mjs";
+import { atlasCoreReleaseUrl } from "./config.mjs";
 
 const { cp, rm, mkdir, test } = sh;
 
-async function getLatestReleaseByName(name, atlasCoreReleaseUrl) {
-    const releasesResponse = await fetchGithubRestAPI(`${atlasCoreReleaseUrl}`);
-
-    if (!releasesResponse.ok) {
-        throw new Error("Can't fetch releases");
-    }
-
-    const releases = await releasesResponse.json();
-
-    if (!Array.isArray(releases)) {
-        throw new Error("Releases response is not an array");
-    }
-
-    const filteredReleases = releases.filter(release => release.name.toLowerCase().includes(name.toLowerCase()));
-
-    if (filteredReleases.length === 0) {
-        throw new Error(`No releases found with name: ${name}`);
+async function getReleaseByTag(tag) {
+    const url = `${atlasCoreReleaseUrl}/tags/${tag}`;
+    const response = await fetchGithubRestAPI(url);
+    if (!response.ok) {
+        throw new Error(`Can't fetch release for tag: ${tag}`);
     }
-
-    return filteredReleases[0];
+    return await response.json();
 }
 
 async function downloadAndExtract(url, downloadPath, extractPath) {
@@ -47,10 +35,7 @@ async function updateAtlasThemeSource() {
 
     rm("-rf", config.atlasDirsToRemove);
 
-    const release = await getLatestReleaseByName(
-        "Atlas Core - Marketplace Release v3.17.0",
-        config.atlasCoreReleaseUrl
-    );
+    const release = await getReleaseByTag("atlas-core-v3.17.0");
     const { browser_download_url } = release.assets[0];
     const downloadedPath = join(await usetmp(), config.nameForDownloadedAtlasCore);
     const outPath = await usetmp();
@@ -78,11 +63,7 @@ async function updateAtlasTheme() {
 
     // Fetch the specific release by tag from GitHub API
     const tag = "atlasui-theme-files-2024-01-25";
-    const releaseResponse = await fetchGithubRestAPI(`${config.atlasCoreReleaseUrl}/tags/${tag}`);
-    if (!releaseResponse.ok) {
-        throw new Error(`Can't fetch release for tag: ${tag}`);
-    }
-    const release = await releaseResponse.json();
+    const release = await getReleaseByTag(tag);
     if (!release.assets || release.assets.length === 0) {
         throw new Error(`No assets found for release tag: ${tag}`);
     }

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

@@ -106,6 +106,12 @@ $root: ".widget-dropdown-filter";
         }
     }
 
+    &-menu-item-text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
     &-checkbox-slot {
         display: flex;
         margin-inline-end: var(--wdf-outer-spacing);

packages/pluggableWidgets/datagrid-dropdown-filter-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 implemented ellipsis truncation to resolve option caption overflow issues.
+
+- We fixed an issue where tooltips were not displayed correctly when hovering over options.
+
 ## [3.2.0] - 2025-08-18
 
 ### Changed

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

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

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

@@ -19,15 +19,19 @@ export function getProperties(values: DatagridDropdownFilterPreviewProps, defaul
         hidePropertiesIn(defaultProperties, values, ["attr", "attrChoice", "filterOptions", "auto"]);
     }
 
-    if (values.filterable) {
-        hidePropertyIn(defaultProperties, values, "clearable");
+    if (values.filterable || values.multiSelect) {
+        // empty option is not shown when any of those are enabled
         hidePropertyIn(defaultProperties, values, "emptyOptionCaption");
-    } else {
-        hidePropertyIn(defaultProperties, values, "filterInputPlaceholderCaption");
     }
 
-    if (!values.filterable) {
+    if (values.filterable) {
+        // when it is filterable, we always imply clearable as true, so we hide the property
+        hidePropertyIn(defaultProperties, values, "clearable");
+    } else {
+        // when it is not filterable, we don't need the attribute to search on
         hidePropertyIn(defaultProperties, values, "refSearchAttr");
+        // when it is not filterable, we hide the caption for input as input is never shown
+        hidePropertyIn(defaultProperties, values, "filterInputPlaceholderCaption");
     }
 
     if (values.refCaptionSource === "attr") {

packages/pluggableWidgets/datagrid-dropdown-filter-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="DatagridDropdownFilter" version="3.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="DatagridDropdownFilter" version="3.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="DatagridDropdownFilter.xml" />
         </widgetFiles>

packages/shared/widget-plugin-dropdown-filter/src/controls/base/OptionsWrapper.tsx

@@ -1,18 +1,10 @@
 import { UseComboboxPropGetters, UseSelectPropGetters } from "downshift";
 import { createElement, CSSProperties, forwardRef, ReactElement, RefObject } from "react";
 import { OptionWithState } from "../../typings/OptionWithState";
-
-type OptionsWrapperClassNamesProps = {
-    popover?: string;
-    menuSlot?: string;
-    menu?: string;
-    menuItem?: string;
-    checkboxSlot?: string;
-    checkbox?: string;
-};
+import { PickerCssClasses } from "../picker-primitives";
 
 type OptionsWrapperProps = {
-    cls: OptionsWrapperClassNamesProps;
+    cls: PickerCssClasses;
     style: CSSProperties;
     onMenuScroll?: React.UIEventHandler<HTMLUListElement>;
     isOpen: boolean;
@@ -51,6 +43,7 @@ export const OptionsWrapper = forwardRef((props: OptionsWrapperProps, ref: RefOb
                                 data-highlighted={highlightedIndex === index || undefined}
                                 key={item.value || index}
                                 className={cls.menuItem}
+                                title={item.caption}
                                 {...getItemProps({
                                     item,
                                     index,
@@ -73,7 +66,7 @@ export const OptionsWrapper = forwardRef((props: OptionsWrapperProps, ref: RefOb
                                         />
                                     </span>
                                 )}
-                                {item.caption || "\u00A0"}
+                                <span className={cls.menuItemText}>{item.caption || "\u00A0"}</span>
                             </li>
                         ))}
                 </ul>

packages/shared/widget-plugin-dropdown-filter/src/controls/picker-primitives.tsx

@@ -8,6 +8,7 @@ type ClassKeys =
     | "menu"
     | "menuSlot"
     | "menuItem"
+    | "menuItemText"
     | "menuCheckbox"
     | "checkboxSlot"
     | "popover"
@@ -19,7 +20,9 @@ type ClassKeys =
     | "separator"
     | "checkbox";
 
-export function classes(rootName = "widget-dropdown-filter"): Record<ClassKeys, string> {
+export type PickerCssClasses = Record<ClassKeys, string>;
+
+export function classes(rootName = "widget-dropdown-filter"): PickerCssClasses {
     return {
         root: rootName,
         input: `${rootName}-input`,
@@ -28,6 +31,7 @@ export function classes(rootName = "widget-dropdown-filter"): Record<ClassKeys,
         menu: `${rootName}-menu`,
         menuSlot: `${rootName}-menu-slot`,
         menuItem: `${rootName}-menu-item`,
+        menuItemText: `${rootName}-menu-item-text`,
         menuCheckbox: `${rootName}-menu-checkbox`,
         checkboxSlot: `${rootName}-checkbox-slot`,
         popover: `${rootName}-popover`,