diff --git a/packages/main/cypress/specs/Select.cy.tsx b/packages/main/cypress/specs/Select.cy.tsx index 4ad8461ea70f..82424f905102 100644 --- a/packages/main/cypress/specs/Select.cy.tsx +++ b/packages/main/cypress/specs/Select.cy.tsx @@ -443,6 +443,76 @@ describe("Select - Accessibility", () => { .find("#accessibleDescription") .should("have.text", "First description Updated second description Third description"); }); + + it("should not display tooltip when Select is not readonly", () => { + cy.mount( + + ); + + cy.get("[ui5-select]") + .shadow() + .find(".ui5-select-root") + .should("not.have.attr", "title"); + }); + + it("should display user tooltip with precedence over the default tooltip", () => { + cy.mount( + + ); + + cy.get("[ui5-select]") + .shadow() + .find(".ui5-select-root") + .should("have.attr", "title", "Custom tooltip"); + }); + + it("should display default tooltip (text + additionalText) if it is read-only and text is truncated, even if tooltip is not set", () => { + cy.mount( + + ); + + cy.get("[ui5-select]") + .shadow() + .find(".ui5-select-root") + .should("have.attr", "title", "VeryLongOptionText – AdditionalInfo"); + }); + + it("should display default tooltip (text) if it is read-only and text is truncated, even if tooltip is not set", () => { + cy.mount( + + ); + + cy.get("[ui5-select]") + .shadow() + .find(".ui5-select-root") + .should("have.attr", "title", "VeryLongOptionTextThatWillBeTruncated"); + }); + + it("should show the text and additionalText, separated by '-' when select is read-only", () => { + cy.mount( + + ); + + cy.get("[ui5-select]") + .shadow() + .find(".ui5-select-label-root") + .should("contain.text", "SelectedOption – ExtraInfo"); + }); }); describe("Select - Popover", () => { @@ -489,6 +559,20 @@ describe("Select - Properties", () => { cy.get("[ui5-select]").should("have.prop", "formFormattedValue", ""); }); + + it("Should show the selected two-column-separator when select is read-only", () => { + cy.mount( + + ); + + cy.get("[ui5-select]") + .shadow() + .find(".ui5-select-label-root") + .should("contain.text", " | "); + }); }); describe("Select - Validation", () => { diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts index 66693a37ffe5..7e4a33f6af9a 100644 --- a/packages/main/src/Select.ts +++ b/packages/main/src/Select.ts @@ -26,6 +26,7 @@ import { getEffectiveAriaDescriptionText, } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js"; import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; +import SelectTwoColumnSeparator from "./types/SelectTwoColumnSeparator.js"; import "@ui5/webcomponents-icons/dist/error.js"; import "@ui5/webcomponents-icons/dist/alert.js"; import "@ui5/webcomponents-icons/dist/sys-enter-2.js"; @@ -337,6 +338,16 @@ class Select extends UI5Element implements IFormInputElement { @property() tooltip?: string; + /** + * Defines the separator type for the two columns layout when Select is in read-only mode. + * + * @default "Dash" + * @public + * @since 2.15.0 + */ + @property() + twoColumnSeparator: `${SelectTwoColumnSeparator}` = "Dash"; + /** * Constantly updated value of texts collected from the associated description texts * @private @@ -582,8 +593,69 @@ class Select extends UI5Element implements IFormInputElement { return this.options.find(option => option.selected); } - get text() { - return this.selectedOption?.effectiveDisplayText; + /** + * Helper function to build display text with separator when additional text exists + * @param mainText - The main text content + * @param additionalText - The additional text (optional) + * @returns The combined text with separator if additionalText exists, otherwise just mainText + * @private + */ + _buildDisplayText(mainText: string, additionalText?: string) { + if (!additionalText) { + return mainText; + } + + return `${mainText} ${this._separatorSymbol} ${additionalText}`; + } + + get text(): string { + const selectedOption = this.selectedOption; + if (!selectedOption) { + return ""; + } + + // Only show separator when readonly and there's additional text + if (this.readonly && selectedOption.additionalText) { + return this._buildDisplayText( + selectedOption.effectiveDisplayText, + selectedOption.additionalText, + ); + } + + return selectedOption.effectiveDisplayText; + } + + get _effectiveTooltip(): string | undefined { + // User-defined tooltip takes precedence + if (this.tooltip) { + return this.tooltip; + } + + // Provide default tooltip for readonly mode to show full content + if (this.readonly) { + const selectedOption = this.selectedOption; + if (!selectedOption) { + return undefined; + } + + // Use textContent for tooltip to show actual text content, not display text + const mainText = selectedOption.textContent || ""; + return this._buildDisplayText(mainText, selectedOption.additionalText); + } + + return undefined; + } + + get _separatorSymbol(): string { + switch (this.twoColumnSeparator) { + case SelectTwoColumnSeparator.Bullet: + return "·"; // Middle dot (U+00B7) + case SelectTwoColumnSeparator.VerticalLine: + return "|"; // Vertical line (U+007C) + case SelectTwoColumnSeparator.Dash: + default: + return "–"; // En dash (U+2013) + } } _toggleRespPopover() { diff --git a/packages/main/src/SelectTemplate.tsx b/packages/main/src/SelectTemplate.tsx index df81b7277eb0..c0ed1fb24c7c 100644 --- a/packages/main/src/SelectTemplate.tsx +++ b/packages/main/src/SelectTemplate.tsx @@ -13,7 +13,7 @@ export default function SelectTemplate(this: Select) { }} id={`${this._id}-select`} onClick={this._onclick} - title={this.tooltip} + title={this._effectiveTooltip} > {!this.icon && this.selectedOptionIcon && icon prop Check Validity + +
+

Separator configuration

+
+ Two column separator: + + Dash + Bullet + VerticalLine + +
+ +
+ Read-only: + +
+ + + Algeria + Argentina + Australia + +
+ \ No newline at end of file