Skip to content

Commit e2fbe90

Browse files
committed
fix: option text title and ellipsis overflow
1 parent 060e651 commit e2fbe90

File tree

6 files changed

+22
-14
lines changed

6 files changed

+22
-14
lines changed

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,11 @@ $root: ".widget-dropdown-filter";
106106
}
107107
}
108108

109+
&-menu-item-text {
110+
overflow: hidden;
111+
text-overflow: ellipsis;
112+
}
113+
109114
&-checkbox-slot {
110115
display: flex;
111116
margin-inline-end: var(--wdf-outer-spacing);

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
66

77
## [Unreleased]
88

9+
### Fixed
10+
11+
- We implemented ellipsis truncation to resolve option caption overflow issues.
12+
13+
- We fixed an issue where tooltips were not displayed correctly when hovering over options.
14+
915
## [3.2.0] - 2025-08-18
1016

1117
### Changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@mendix/datagrid-dropdown-filter-web",
33
"widgetName": "DatagridDropdownFilter",
4-
"version": "3.2.0",
4+
"version": "3.3.0",
55
"description": "",
66
"copyright": "© Mendix Technology BV 2025. All rights reserved.",
77
"license": "Apache-2.0",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<?xml version="1.0" encoding="utf-8" ?>
22
<package xmlns="http://www.mendix.com/package/1.0/">
3-
<clientModule name="DatagridDropdownFilter" version="3.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
3+
<clientModule name="DatagridDropdownFilter" version="3.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
44
<widgetFiles>
55
<widgetFile path="DatagridDropdownFilter.xml" />
66
</widgetFiles>

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

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,10 @@
11
import { UseComboboxPropGetters, UseSelectPropGetters } from "downshift";
22
import { createElement, CSSProperties, forwardRef, ReactElement, RefObject } from "react";
33
import { OptionWithState } from "../../typings/OptionWithState";
4-
5-
type OptionsWrapperClassNamesProps = {
6-
popover?: string;
7-
menuSlot?: string;
8-
menu?: string;
9-
menuItem?: string;
10-
checkboxSlot?: string;
11-
checkbox?: string;
12-
};
4+
import { PickerCssClasses } from "../picker-primitives";
135

146
type OptionsWrapperProps = {
15-
cls: OptionsWrapperClassNamesProps;
7+
cls: PickerCssClasses;
168
style: CSSProperties;
179
onMenuScroll?: React.UIEventHandler<HTMLUListElement>;
1810
isOpen: boolean;
@@ -51,6 +43,7 @@ export const OptionsWrapper = forwardRef((props: OptionsWrapperProps, ref: RefOb
5143
data-highlighted={highlightedIndex === index || undefined}
5244
key={item.value || index}
5345
className={cls.menuItem}
46+
title={item.caption}
5447
{...getItemProps({
5548
item,
5649
index,
@@ -73,7 +66,7 @@ export const OptionsWrapper = forwardRef((props: OptionsWrapperProps, ref: RefOb
7366
/>
7467
</span>
7568
)}
76-
{item.caption || "\u00A0"}
69+
<span className={cls.menuItemText}>{item.caption || "\u00A0"}</span>
7770
</li>
7871
))}
7972
</ul>

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ type ClassKeys =
88
| "menu"
99
| "menuSlot"
1010
| "menuItem"
11+
| "menuItemText"
1112
| "menuCheckbox"
1213
| "checkboxSlot"
1314
| "popover"
@@ -19,7 +20,9 @@ type ClassKeys =
1920
| "separator"
2021
| "checkbox";
2122

22-
export function classes(rootName = "widget-dropdown-filter"): Record<ClassKeys, string> {
23+
export type PickerCssClasses = Record<ClassKeys, string>;
24+
25+
export function classes(rootName = "widget-dropdown-filter"): PickerCssClasses {
2326
return {
2427
root: rootName,
2528
input: `${rootName}-input`,
@@ -28,6 +31,7 @@ export function classes(rootName = "widget-dropdown-filter"): Record<ClassKeys,
2831
menu: `${rootName}-menu`,
2932
menuSlot: `${rootName}-menu-slot`,
3033
menuItem: `${rootName}-menu-item`,
34+
menuItemText: `${rootName}-menu-item-text`,
3135
menuCheckbox: `${rootName}-menu-checkbox`,
3236
checkboxSlot: `${rootName}-checkbox-slot`,
3337
popover: `${rootName}-popover`,

0 commit comments

Comments
 (0)