diff --git a/packages/fiori/cypress/specs/Search.cy.tsx b/packages/fiori/cypress/specs/Search.cy.tsx
index 1d42f1e53ffb..bb36ec2b028a 100644
--- a/packages/fiori/cypress/specs/Search.cy.tsx
+++ b/packages/fiori/cypress/specs/Search.cy.tsx
@@ -833,6 +833,31 @@ describe("Properties", () => {
.find(".ui5-search-item-selected-delete")
.should("be.focused");
});
+
+ it("SearchItemGroup has wrapping type set to Normal", () => {
+ cy.mount(
+
+
+
+
+
+
+ );
+
+ cy.get("[ui5-search]")
+ .shadow()
+ .find("input")
+ .realClick();
+
+ cy.get("[ui5-search]")
+ .realPress("L");
+
+ // Verify that the header element has the correct wrapping-type attribute
+ cy.get("ui5-search-item-group")
+ .shadow()
+ .find("[ui5-li-group-header]")
+ .should("have.attr", "wrapping-type", "Normal");
+ });
});
describe("Events", () => {
diff --git a/packages/fiori/src/SearchItemGroup.ts b/packages/fiori/src/SearchItemGroup.ts
index 96ab8f717d6b..1f44eeb321d4 100644
--- a/packages/fiori/src/SearchItemGroup.ts
+++ b/packages/fiori/src/SearchItemGroup.ts
@@ -2,6 +2,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
import ListItemGroup from "@ui5/webcomponents/dist/ListItemGroup.js";
import SearchItemGroupCss from "./generated/themes/SearchItemGroup.css.js";
import ListBoxItemGroupTemplate from "@ui5/webcomponents/dist/ListBoxItemGroupTemplate.js";
+import WrappingType from "@ui5/webcomponents/dist/types/WrappingType.js";
/**
* @class
@@ -25,6 +26,10 @@ class SearchItemGroup extends ListItemGroup {
get isGroupItem(): boolean {
return true;
}
+
+ getGroupHeaderWrapping(): WrappingType {
+ return WrappingType.Normal;
+ }
}
SearchItemGroup.define();
diff --git a/packages/fiori/src/themes/SearchItemGroup.css b/packages/fiori/src/themes/SearchItemGroup.css
index 18384968fcfe..906176cf21fe 100644
--- a/packages/fiori/src/themes/SearchItemGroup.css
+++ b/packages/fiori/src/themes/SearchItemGroup.css
@@ -14,6 +14,10 @@
list-style-type: none;
}
+[ui5-li-group-header]::part(native-li) {
+ line-height: normal;
+ padding-bottom: 0.5rem;
+}
[ui5-li-group-header] {
border-bottom: var(--sapList_BorderWidth) solid var(--sapList_GroupHeaderBorderColor);
diff --git a/packages/fiori/test/pages/Search.html b/packages/fiori/test/pages/Search.html
index e68a0e770df8..ca7254e3ae2d 100644
--- a/packages/fiori/test/pages/Search.html
+++ b/packages/fiori/test/pages/Search.html
@@ -258,9 +258,14 @@
-
-
Search with lazy loaded Suggestions - Autocomplete and highlighting
-
+
+ Search with Suggestions with long group header text (wrapping)
+
+
+
+
+
+