fix: option text title and ellipsis overflow

Author: r0b1n

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

@@ -106,6 +106,11 @@ $root: ".widget-dropdown-filter";
         }
     }
 
+    &-menu-item-text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
     &-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/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`,