@sapudex/web-components 2.42.0 → 2.44.0

package/cypress/specs/Checkbox.cy.tsx

@@ -34,7 +34,7 @@ describe("Checkbox", () => {
 
   it("renders displayonly corectly", () => {
     cy.mount(<UDExCheckbox displayOnly></UDExCheckbox>)
-    cy.get("[udex-checkbox]").shadow().find("ui5-icon").should("be.visible")
+    cy.get("[udex-checkbox]").shadow().find("[ui5-icon]").should("exist")
   });
 
   it("correctly sets aria-checked", () => {

package/cypress/specs/FilterMenu.cy.tsx

@@ -964,4 +964,281 @@ describe("Filter Menu component", () => {
         .should("have.attr", "data-selected", "true");
     });
   });
+
+  // Added: covers SearchableListBase.filterItems group-header label matching.
+  // When the search query matches a group header's label, the header label is
+  // highlighted with <b> tags and ALL children of that group are shown.
+  // When only some children match, the header label is left intact (no <b>)
+  // and only the matching children are rendered.
+  describe("Filter Menu group header search highlighting", () => {
+    // Helper selector — the header's label is rendered inside the inner
+    // udex-list-item's shadow DOM as <span part="title">{{{label}}}</span>.
+    const titleSelector = "[part='title']";
+
+    // A stale document-level 'ui5-change-search' listener registered by the
+    // "emit change-search" test above references #changeSearch which doesn't
+    // exist in the filterMenuGroupWithSearch fixture, causing an app crash.
+    // Suppress it so it doesn't bleed into these tests.
+    beforeEach(() => {
+      cy.on("uncaught:exception", (err) => {
+        if (err.message.includes("Cannot set properties of null (setting 'innerText')")) {
+          return false;
+        }
+      });
+    });
+
+    const typeIntoSearch = (query: string) => {
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-search").shadow()
+        .find(".udex-search__field")
+        .click().type(query);
+    };
+
+    // Updated: covers Fix 1 — when the header label matches, children whose
+    // labels also contain the query now get <b> highlights too. Query "P"
+    // matches header "Programming Languages" AND children Python, Perl, PHP.
+    it("highlights the group header label with <b> tags when the search query matches the header label", () => {
+      cy.mount(filterMenuGroupWithSearch);
+      cy.get("[udex-filter-menu]").shadow()
+        .find(".udex-filter-menu__trigger").click();
+
+      typeIntoSearch("P");
+
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-list-group-header").should("exist");
+
+      // Header "Programming Languages" starts with "P" — it must be highlighted.
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-list-group-header").shadow()
+        .find("udex-list-item").shadow()
+        .find(titleSelector)
+        .find("b")
+        .should("exist")
+        .and("have.text", "P");
+
+      // Fix 1: child "Python" (index 1) also contains "P" and must be highlighted.
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-list-group-header")
+        .find("udex-list-item").eq(1).shadow()
+        .find(titleSelector)
+        .find("b")
+        .should("exist")
+        .and("have.text", "P");
+    });
+
+    // Updated: covers Fix 1 — children matching the query DO get <b>; children
+    // that do not contain the query do NOT get <b>. Highlighting is selective,
+    // not all-or-nothing, even when the header match keeps every child visible.
+    it("shows ALL children of the group when the search query matches the group header label", () => {
+      cy.mount(filterMenuGroupWithSearch);
+      cy.get("[udex-filter-menu]").shadow()
+        .find(".udex-filter-menu__trigger").click();
+
+      typeIntoSearch("P");
+
+      // The fixture has 14 children. Header match means none are filtered out.
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-list-group-header")
+        .find("udex-list-item")
+        .should("have.length", 14);
+
+      // "Python" (index 1) contains "P" — its label gets a <b> highlight.
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-list-group-header")
+        .find("udex-list-item").eq(1).shadow()
+        .find(titleSelector)
+        .find("b")
+        .should("exist");
+
+      // "Java" (index 2) does NOT contain "P" — its label has no <b>.
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-list-group-header")
+        .find("udex-list-item").eq(2).shadow()
+        .find(titleSelector)
+        .find("b")
+        .should("not.exist");
+    });
+
+    // Added: covers Fix 2 — checkAndUpdateLabel now resets item.label to its
+    // clean form before deciding whether to add a new <b>, so a header that
+    // matched a previous query is cleaned up when the new query no longer
+    // matches it.
+    it("clears stale highlight on header when query changes", () => {
+      cy.mount(filterMenuGroupWithSearch);
+      cy.get("[udex-filter-menu]").shadow()
+        .find(".udex-filter-menu__trigger").click();
+
+      // First search matches the header — header label is highlighted.
+      typeIntoSearch("Programming");
+
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-list-group-header").shadow()
+        .find("udex-list-item").shadow()
+        .find(titleSelector)
+        .find("b")
+        .should("exist");
+
+      // Replace the search with one that does NOT match the header label.
+      // "Java" matches children but not "Programming Languages".
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-search").shadow()
+        .find(".udex-search__field")
+        .clear().type("Java");
+
+      // Fix 2: stale <b> from the previous "Programming" match must be gone.
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-list-group-header").shadow()
+        .find("udex-list-item").shadow()
+        .find(titleSelector)
+        .find("b")
+        .should("not.exist");
+    });
+
+    it("does NOT highlight the group header label when only child items match the query", () => {
+      cy.mount(filterMenuGroupWithSearch);
+      cy.get("[udex-filter-menu]").shadow()
+        .find(".udex-filter-menu__trigger").click();
+
+      // "Java" matches both "Java" and "JavaScript" in the children list, but
+      // not the header label "Programming Languages".
+      typeIntoSearch("Java");
+
+      // Only matching children are rendered.
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-list-group-header")
+        .find("udex-list-item")
+        .should("have.length", 2);
+
+      // Header label has no <b> tag because the header label itself does not
+      // contain "Java" — only the children do.
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-list-group-header").shadow()
+        .find("udex-list-item").shadow()
+        .find(titleSelector)
+        .find("b")
+        .should("not.exist");
+
+      // The matching children themselves DO have <b> highlighting in their labels.
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-list-group-header")
+        .find("udex-list-item").first().shadow()
+        .find(titleSelector)
+        .find("b")
+        .should("exist");
+    });
+
+    it("hides the group entirely when neither the header nor any child matches the query", () => {
+      cy.mount(filterMenuGroupWithSearch);
+      cy.get("[udex-filter-menu]").shadow()
+        .find(".udex-filter-menu__trigger").click();
+
+      typeIntoSearch("zzznomatch");
+
+      // The whole group is filtered out — group header is not rendered in shadow.
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-list-group-header")
+        .should("not.exist");
+
+      // The empty-state message is shown instead.
+      cy.get("[udex-filter-menu]").shadow()
+        .find(".udex-no-result")
+        .should("have.text", "No matches found.");
+    });
+  });
+
+  describe("Dropdown scroll on close", () => {
+    const filterMenuSingleSelectScrollFixture = <UDExFilterMenu
+      id="filter-menu"
+      filter-name="Languages"
+      height="200px">
+      <UDExFilterMenuItem label="A"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="B"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="C"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="D"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="E"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="F"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="G"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="H"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="I"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="J"></UDExFilterMenuItem>
+      <UDExFilterMenuItem selected label="K"></UDExFilterMenuItem>
+    </UDExFilterMenu>
+
+    const filterMenuScrollFixture = <UDExFilterMenu
+      id="filter-menu"
+      filter-name="Filter Name"
+      mode={UDExListMode.MultiSelect}
+      height="200px">
+      <UDExFilterMenuItem label="JavaScript" supporting-text="Frontend web development"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="Python" supporting-text="Used in data analysis"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="Java" supporting-text="Building large-scale applications"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="Swift" supporting-text="iOS app development"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="C#" supporting-text="Object-oriented language"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="Perl" supporting-text="General-purpose scripting language"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="Rust" supporting-text="Focused on safety and speed"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="PHP" supporting-text="Server-side scripting language"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="Go" supporting-text="Statically typed language"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="Kotlin" supporting-text="For Android development"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="TypeScript" supporting-text="Super set of JS with static typing"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="Ruby" supporting-text="Readable and easy-to-use"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="C++" supporting-text="Efficient and flexible language"></UDExFilterMenuItem>
+      <UDExFilterMenuItem label="R" supporting-text="Language for statistical computing"></UDExFilterMenuItem>
+    </UDExFilterMenu>
+
+    it("SingleSelect mode - selected item is scrolled into view after closing and reopening the dropdown", () => {
+      cy.mount(filterMenuSingleSelectScrollFixture);
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("trigger");
+
+      cy.get("@trigger").click();
+
+      cy.get("[udex-filter-menu]").shadow()
+        .find(".udex-filter-menu__list")
+        .find("udex-list-item").last()
+        .shadow().find(".udex-list__item")
+        .click();
+
+      cy.get("@trigger").should("have.attr", "aria-expanded", "false");
+
+      cy.get("@trigger").click();
+
+      cy.get("@trigger").should("have.attr", "aria-expanded", "true");
+
+      cy.get("#filter-menu").shadow()
+        .find("ui5-popover").shadow()
+        .find("[part=content]")
+        .invoke("prop", "scrollTop")
+        .should("be.greaterThan", 0);
+    });
+
+    it("MultiSelect mode - scroll position resets to top after closing and reopening the dropdown", () => {
+      cy.mount(filterMenuScrollFixture);
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("trigger");
+
+      cy.get("@trigger").click();
+
+      cy.get("#filter-menu").shadow()
+        .find("ui5-popover").shadow()
+        .find("[part=content]").as("content");
+
+      cy.get("@content").then($el => {
+        $el[0].scrollTop = 9999;
+      });
+
+      cy.get("@content").invoke("prop", "scrollTop").should("be.greaterThan", 0);
+
+      cy.get("@trigger").click();
+
+      cy.get("@trigger").should("have.attr", "aria-expanded", "false");
+
+      cy.get("@trigger").click();
+
+      cy.get("@trigger").should("have.attr", "aria-expanded", "true");
+
+      cy.get("#filter-menu").shadow()
+        .find("ui5-popover").shadow()
+        .find("[part=content]")
+        .invoke("prop", "scrollTop")
+        .should("equal", 0);
+    });
+  });
 });

package/cypress/specs/Search.cy.tsx

@@ -383,4 +383,24 @@ describe("UDExSearch — keyboard focus management (rewritten)", () => {
         });
     });
   });
+
+  describe("maxlength property", () => {
+    it("forwards the maxLength property onto the inner #search-input as a maxlength attribute", () => {
+      cy.mount(<UDExSearch id="search" maxlength={10} />);
+
+      cy.get(SEARCH_SHADOW)
+        .shadow()
+        .find(SEARCH_INPUT)
+        .should("have.attr", "maxlength", "10");
+    });
+
+    it("does not set a maxlength attribute on the inner #search-input when maxLength is not provided", () => {
+      cy.mount(<UDExSearch id="search" />);
+
+      cy.get(SEARCH_SHADOW)
+        .shadow()
+        .find(SEARCH_INPUT)
+        .should("not.have.attr", "maxlength");
+    });
+  });
 });