@sapudex/web-components 2.42.0 → 2.44.0

package/cypress/specs/SelectBox.cy.tsx

@@ -1,5 +1,7 @@
 import { UDExSelectBox, UDExSelectBoxSelectAll, UDExSelectBoxGroupHeader, UDExSelectBoxItem, UDExButton, UDExModal } from  "../support/component-imports.js";
-import { UDExListMode } from "../../src/types/List.js";
+import { UDExListItemSize, UDExListMode, UDExListStyleType } from "../../src/types/List.js";
+import { UDExAvatarShape, UDExAvatarSize } from "../../src/Avatar.js";
+import UDExStatusBadgeValueState from "../../src/types/StatusBadgeValueState.js";
 
 const selectBoxWithRating = <div style="width: 350px; position:relative;"><UDExSelectBox
   id="select-box"
@@ -337,6 +339,9 @@ describe("SelectBox", () => {
     cy.get("#select-box").shadow()
     .find(".udex-tag-group").shadow().as("tagGroup");
 
+    // Wait for the resize handler to fire and render the tooltip before clicking.
+    cy.get("@tagGroup").find("udex-tooltip").should("exist");
+
     cy.get("@tagGroup")
     .find(".udex-tag-group__tokenizer").shadow()
     .find(".ui5-tokenizer-more-text")
@@ -1594,6 +1599,180 @@ describe("SelectBox", () => {
     });
   });
 
+  // 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 the query matches only some children, the header label is left intact
+  // (no <b>) and only the matching children are shown.
+  describe("Select Box group header search highlighting", () => {
+    const groupHeaderForSearch = <div style="width: 350px; position:relative;">
+      <UDExSelectBox
+        id="select-box"
+        mode={UDExListMode.MultiSelect}
+        label="Programming languages">
+        <UDExSelectBoxGroupHeader label="Programming Languages" supportingText="Digital Builders">
+          <UDExSelectBoxItem label="JavaScript" supportingText="Frontend web development"></UDExSelectBoxItem>
+          <UDExSelectBoxItem label="Python" supportingText="Used in data analysis"></UDExSelectBoxItem>
+        </UDExSelectBoxGroupHeader>
+      </UDExSelectBox>
+    </div>;
+
+    // Selector for the title span inside the udex-list-item rendered for the
+    // multi-select group header. The label is forwarded as the `label` attribute
+    // of the inner udex-list-item, which renders it as <span part="title">{{{label}}}</span>.
+    const groupHeaderTitleSelector = "[part='title']";
+
+    // 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 child "Python".
+    it("highlights the group header label with <b> tags when the search query matches the header label", () => {
+      cy.mount(groupHeaderForSearch);
+      cy.get("#select-box").shadow()
+        .find(".udex-text-field__search").click();
+      cy.realType("P");
+
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header").should("exist");
+
+      // Header label is highlighted on the "P" of "Programming Languages".
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header").shadow()
+        .find("udex-list-item").shadow()
+        .find(groupHeaderTitleSelector)
+        .find("b")
+        .should("exist")
+        .and("have.text", "P");
+
+      // Fix 1: child "Python" also matches "P" and must be highlighted as well,
+      // not left as a plain label just because the header matched.
+      // Children render in slotted order: index 0 = JavaScript, index 1 = Python.
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header")
+        .find("udex-list-item").eq(1).shadow()
+        .find(groupHeaderTitleSelector)
+        .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.
+    // Query "n": header "Programming Languages" has "n", "Python" has "n",
+    // "JavaScript" has no "n" — so eq(1) is highlighted, eq(0) is not.
+    it("shows ALL children of the group when the search query matches the group header label", () => {
+      cy.mount(groupHeaderForSearch);
+      cy.get("#select-box").shadow()
+        .find(".udex-text-field__search").click();
+      cy.realType("n");
+
+      // Both children remain rendered as udex-list-item inside the group header
+      // even though only one of their labels matches — header match shows all children.
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header")
+        .find("udex-list-item")
+        .should("have.length", 2);
+
+      // "Python" (index 1) contains "n" — its label gets a <b> highlight.
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header")
+        .find("udex-list-item").eq(1).shadow()
+        .find(groupHeaderTitleSelector)
+        .find("b")
+        .should("exist");
+
+      // "JavaScript" (index 0) has no "n" — its label has no <b>.
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header")
+        .find("udex-list-item").eq(0).shadow()
+        .find(groupHeaderTitleSelector)
+        .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(groupHeaderForSearch);
+      cy.get("#select-box").shadow()
+        .find(".udex-text-field__search").as("searchField");
+
+      // First search matches the header — header label is highlighted.
+      cy.get("@searchField").click();
+      cy.realType("Programming");
+
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header").shadow()
+        .find("udex-list-item").shadow()
+        .find(groupHeaderTitleSelector)
+        .find("b")
+        .should("exist");
+
+      // Replace the search with one that does NOT match the header label.
+      // "Java" matches a child but not "Programming Languages".
+      cy.get("@searchField").clear();
+      cy.get("@searchField").click();
+      cy.realType("Java");
+
+      // Fix 2: stale <b> from the previous "Programming" match must be gone.
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header").shadow()
+        .find("udex-list-item").shadow()
+        .find(groupHeaderTitleSelector)
+        .find("b")
+        .should("not.exist");
+    });
+
+    it("does NOT highlight the group header label when only child items match the query", () => {
+      cy.mount(groupHeaderForSearch);
+      cy.get("#select-box").shadow()
+        .find(".udex-text-field__search").click();
+      cy.realType("Python");
+
+      // Only the matching child is rendered as an udex-list-item under the header.
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header")
+        .find("udex-list-item")
+        .should("have.length", 1);
+
+      // The matching child label itself receives the <b> highlight.
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header")
+        .find("udex-list-item").shadow()
+        .find(groupHeaderTitleSelector)
+        .find("b")
+        .should("have.text", "Python");
+
+      // Header label has no <b> tag because the header label itself does not
+      // match "Python" — only the child does.
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header").shadow()
+        .find("udex-list-item").shadow()
+        .find(groupHeaderTitleSelector)
+        .find("b")
+        .should("not.exist");
+    });
+
+    it("hides the group entirely when neither the header nor any child matches the query", () => {
+      cy.mount(groupHeaderForSearch);
+      cy.get("#select-box").shadow()
+        .find(".udex-text-field__search").click();
+      cy.realType("zzznomatch");
+
+      // The whole group is filtered out — group header is not rendered in shadow.
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header")
+        .should("not.exist");
+
+      // The empty-state message is shown instead.
+      cy.get("#select-box").shadow()
+        .find(".udex-no-result")
+        .should("include.text", "No matches found.");
+    });
+  });
+
   describe("SelectBox keyboard navigation with action icon buttons", () => {
     const shortComponentWithFocusTargets = <div style="width: 350px; position:relative;">
       <a id="previous-focus" href="#">Previous focusable element</a>
@@ -1774,4 +1953,355 @@ describe("SelectBox", () => {
       cy.get("#next-focus").should("be.focused");
     });
   });
+
+  describe("SelectBoxItem forwarded properties", () => {
+    const selectBoxWithImageItems = <div style="width: 350px; position:relative;">
+      <UDExSelectBox id="select-box" label="People">
+        <UDExSelectBoxItem
+          id="item-image"
+          label="Alice"
+          image="./stories/list/image.png"
+          imageAlt="Alice avatar"
+          imageBadgeState={UDExStatusBadgeValueState.Information}
+          imageShape={UDExAvatarShape.Square}
+          imageSize={UDExAvatarSize.M}>
+        </UDExSelectBoxItem>
+        <UDExSelectBoxItem
+          id="item-image-default-shape-size"
+          label="Bob"
+          image="./stories/list/image.png"
+          imageAlt="Bob avatar">
+        </UDExSelectBoxItem>
+      </UDExSelectBox>
+    </div>;
+
+    const selectBoxWithFlagItems = <div style="width: 350px; position:relative;">
+      <UDExSelectBox id="select-box" label="Countries">
+        <UDExSelectBoxItem id="item-flag-start" label="Germany" flag flagPosition="start"></UDExSelectBoxItem>
+        <UDExSelectBoxItem id="item-flag-end" label="France" flag flagPosition="end"></UDExSelectBoxItem>
+        <UDExSelectBoxItem id="item-no-flag" label="Spain"></UDExSelectBoxItem>
+      </UDExSelectBox>
+    </div>;
+
+    const selectBoxWithIconType = <div style="width: 350px; position:relative;">
+      <UDExSelectBox id="select-box-icon" label="Items" type={UDExListStyleType.Icon} itemIcon="accept">
+        <UDExSelectBoxItem id="item-icon" label="Saved"></UDExSelectBoxItem>
+        <UDExSelectBoxItem id="item-icon-2" label="Done"></UDExSelectBoxItem>
+      </UDExSelectBox>
+    </div>;
+
+    const selectBoxWithCircleType = <div style="width: 350px; position:relative;">
+      <UDExSelectBox id="select-box-circle" label="Items" type={UDExListStyleType.Circle}>
+        <UDExSelectBoxItem id="item-circle" label="Bullet"></UDExSelectBoxItem>
+      </UDExSelectBox>
+    </div>;
+
+    const selectBoxWithNumberType = <div style="width: 350px; position:relative;">
+      <UDExSelectBox id="select-box-number" label="Items" type={UDExListStyleType.Number}>
+        <UDExSelectBoxItem id="item-number" label="Numbered"></UDExSelectBoxItem>
+      </UDExSelectBox>
+    </div>;
+
+    const selectBoxWithSizes = <div style="width: 350px; position:relative;">
+      <UDExSelectBox id="select-box" label="Sizes">
+        <UDExSelectBoxItem id="item-large" label="Large" size={UDExListItemSize.Large}></UDExSelectBoxItem>
+        <UDExSelectBoxItem id="item-standard" label="Standard" size={UDExListItemSize.Standard}></UDExSelectBoxItem>
+      </UDExSelectBox>
+    </div>;
+
+    const openDropdown = () => {
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("have.attr", "open");
+    };
+
+    describe("Defaults on the host udex-select-box-item", () => {
+      it("imageShape defaults to 'Circle' on the host element", () => {
+        cy.mount(<UDExSelectBoxItem id="default-item" label="x"></UDExSelectBoxItem>);
+        cy.get("#default-item").then($el => {
+          expect(($el[0] as any).imageShape).to.equal(UDExAvatarShape.Circle);
+        });
+      });
+
+      it("imageSize defaults to 'S' on the host element", () => {
+        cy.mount(<UDExSelectBoxItem id="default-item" label="x"></UDExSelectBoxItem>);
+        cy.get("#default-item").then($el => {
+          expect(($el[0] as any).imageSize).to.equal(UDExAvatarSize.S);
+        });
+      });
+
+      it("type defaults to 'None' on the host element", () => {
+        cy.mount(<UDExSelectBoxItem id="default-item" label="x"></UDExSelectBoxItem>);
+        cy.get("#default-item").then($el => {
+          expect(($el[0] as any).type).to.equal(UDExListStyleType.None);
+        });
+      });
+
+      it("size defaults to 'Standard' on the host element", () => {
+        cy.mount(<UDExSelectBoxItem id="default-item" label="x"></UDExSelectBoxItem>);
+        cy.get("#default-item").then($el => {
+          expect(($el[0] as any).size).to.equal(UDExListItemSize.Standard);
+        });
+      });
+
+      it("flag defaults to falsy on the host element", () => {
+        cy.mount(<UDExSelectBoxItem id="default-item" label="x"></UDExSelectBoxItem>);
+        cy.get("#default-item").then($el => {
+          expect(($el[0] as any).flag).to.not.equal(true);
+        });
+      });
+    });
+
+    describe("Image forwarding", () => {
+      it("forwards image src to the rendered udex-list-item as 'image'", () => {
+        cy.mount(selectBoxWithImageItems);
+        openDropdown();
+
+        cy.get("#select-box").shadow()
+          .find("udex-list-item").eq(0)
+          .should("have.attr", "image", "./stories/list/image.png");
+      });
+
+      it("forwards imageAlt to the rendered udex-list-item as 'image-alt'", () => {
+        cy.mount(selectBoxWithImageItems);
+        openDropdown();
+
+        cy.get("#select-box").shadow()
+          .find("udex-list-item").eq(0)
+          .should("have.attr", "image-alt", "Alice avatar");
+      });
+
+      it("forwards imageBadgeState to the rendered udex-list-item as 'image-badge-state'", () => {
+        cy.mount(selectBoxWithImageItems);
+        openDropdown();
+
+        cy.get("#select-box").shadow()
+          .find("udex-list-item").eq(0)
+          .should("have.attr", "image-badge-state", UDExStatusBadgeValueState.Information);
+      });
+
+      it("forwards imageShape to the rendered udex-list-item as 'image-shape'", () => {
+        cy.mount(selectBoxWithImageItems);
+        openDropdown();
+
+        cy.get("#select-box").shadow()
+          .find("udex-list-item").eq(0)
+          .should("have.attr", "image-shape", UDExAvatarShape.Square);
+      });
+
+      it("forwards imageSize to the rendered udex-list-item as 'image-size'", () => {
+        cy.mount(selectBoxWithImageItems);
+        openDropdown();
+
+        cy.get("#select-box").shadow()
+          .find("udex-list-item").eq(0)
+          .should("have.attr", "image-size", UDExAvatarSize.M);
+      });
+
+      it("forwards default imageShape ('Circle') and imageSize ('S') when not explicitly set", () => {
+        cy.mount(selectBoxWithImageItems);
+        openDropdown();
+
+        cy.get("#select-box").shadow()
+          .find("udex-list-item").eq(1)
+          .should("have.attr", "image-shape", UDExAvatarShape.Circle)
+          .and("have.attr", "image-size", UDExAvatarSize.S);
+      });
+
+      it("renders the avatar inside the rendered udex-list-item shadow with the correct shape and size", () => {
+        cy.mount(selectBoxWithImageItems);
+        openDropdown();
+
+        cy.get("#select-box").shadow()
+          .find("udex-list-item").eq(0)
+          .shadow().find(".udex-list__avatar").as("avatar");
+
+        cy.get("@avatar").should("have.attr", "shape", UDExAvatarShape.Square);
+        cy.get("@avatar").should("have.attr", "size", UDExAvatarSize.M);
+        cy.get("@avatar").find("img").should("have.attr", "alt", "Alice avatar");
+      });
+
+      it("renders the status badge inside the rendered udex-list-item with the forwarded value-state", () => {
+        cy.mount(selectBoxWithImageItems);
+        openDropdown();
+
+        cy.get("#select-box").shadow()
+          .find("udex-list-item").eq(0)
+          .shadow().find("udex-status-badge")
+          .should("have.attr", "value-state", UDExStatusBadgeValueState.Information);
+      });
+    });
+
+    describe("Flag forwarding", () => {
+      it("forwards flag boolean to the rendered udex-list-item as the 'flag' attribute", () => {
+        cy.mount(selectBoxWithFlagItems);
+        openDropdown();
+
+        cy.get("#select-box").shadow()
+          .find("udex-list-item").eq(0)
+          .should("have.attr", "flag");
+      });
+
+      it("forwards flagPosition='start' to the rendered udex-list-item as 'flag-position'", () => {
+        cy.mount(selectBoxWithFlagItems);
+        openDropdown();
+
+        cy.get("#select-box").shadow()
+          .find("udex-list-item").eq(0)
+          .should("have.attr", "flag-position", "start");
+      });
+
+      it("forwards flagPosition='end' to the rendered udex-list-item as 'flag-position'", () => {
+        cy.mount(selectBoxWithFlagItems);
+        openDropdown();
+
+        cy.get("#select-box").shadow()
+          .find("udex-list-item").eq(1)
+          .should("have.attr", "flag-position", "end");
+      });
+
+      it("does not forward flag attribute when flag is not set on the SelectBoxItem", () => {
+        cy.mount(selectBoxWithFlagItems);
+        openDropdown();
+
+        cy.get("#select-box").shadow()
+          .find("udex-list-item").eq(2)
+          .should("not.have.attr", "flag");
+      });
+    });
+
+    describe("itemIcon and type forwarding", () => {
+      it("renders the icon in the list item shadow DOM when type='Icon' and itemIcon is set", () => {
+        cy.mount(selectBoxWithIconType);
+        cy.get("#select-box-icon").shadow().find(".udex-text-field__trigger").click();
+
+        cy.get("#select-box-icon").shadow()
+          .find("udex-list-item").eq(0)
+          .should("have.attr", "type", UDExListStyleType.Icon)
+          .shadow().find("ui5-icon.udex-list__icon")
+          .should("have.attr", "name", "accept");
+      });
+
+      it("forwards type='Circle' to the rendered udex-list-item", () => {
+        cy.mount(selectBoxWithCircleType);
+        cy.get("#select-box-circle").shadow().find(".udex-text-field__trigger").click();
+
+        cy.get("#select-box-circle").shadow()
+          .find("udex-list-item").eq(0)
+          .should("have.attr", "type", UDExListStyleType.Circle);
+      });
+
+      it("forwards type='Number' to the rendered udex-list-item", () => {
+        cy.mount(selectBoxWithNumberType);
+        cy.get("#select-box-number").shadow().find(".udex-text-field__trigger").click();
+
+        cy.get("#select-box-number").shadow()
+          .find("udex-list-item").eq(0)
+          .should("have.attr", "type", UDExListStyleType.Number);
+      });
+    });
+
+    describe("size forwarding", () => {
+      it("forwards size='Large' to the rendered udex-list-item", () => {
+        cy.mount(selectBoxWithSizes);
+        openDropdown();
+
+        cy.get("#select-box").shadow()
+          .find("udex-list-item").eq(0)
+          .should("have.attr", "size", UDExListItemSize.Large);
+      });
+
+      it("forwards size='Standard' (default) to the rendered udex-list-item", () => {
+        cy.mount(selectBoxWithSizes);
+        openDropdown();
+
+        cy.get("#select-box").shadow()
+          .find("udex-list-item").eq(1)
+          .should("have.attr", "size", UDExListItemSize.Standard);
+      });
+    });
+  });
+
+  describe("Dropdown scroll", () => {
+    const singleSelectScrollFixture = <div style="width: 350px; position:relative;">
+      <UDExSelectBox id="select-box" height="200px" label="Languages">
+        <UDExSelectBoxItem label="A"></UDExSelectBoxItem>
+        <UDExSelectBoxItem label="B"></UDExSelectBoxItem>
+        <UDExSelectBoxItem label="C"></UDExSelectBoxItem>
+        <UDExSelectBoxItem label="D"></UDExSelectBoxItem>
+        <UDExSelectBoxItem label="E"></UDExSelectBoxItem>
+        <UDExSelectBoxItem label="F"></UDExSelectBoxItem>
+        <UDExSelectBoxItem label="G"></UDExSelectBoxItem>
+        <UDExSelectBoxItem label="H"></UDExSelectBoxItem>
+        <UDExSelectBoxItem label="I"></UDExSelectBoxItem>
+        <UDExSelectBoxItem label="J"></UDExSelectBoxItem>
+        <UDExSelectBoxItem label="K" selected></UDExSelectBoxItem>
+      </UDExSelectBox>
+    </div>;
+
+    it("MultiSelect mode - scroll position resets to top after closing and reopening the dropdown", () => {
+      cy.mount(multiSelect);
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").as("trigger");
+
+      cy.get("@trigger").click();
+
+      cy.get("#select-box").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("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("not.have.attr", "open");
+
+      cy.get("@trigger").click();
+
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("have.attr", "open");
+
+      cy.get("#select-box").shadow()
+        .find("ui5-popover").shadow()
+        .find("[part=content]")
+        .invoke("prop", "scrollTop")
+        .should("equal", 0);
+    });
+
+    it("SingleSelect mode - selected item is scrolled into view after closing and reopening the dropdown", () => {
+      cy.mount(singleSelectScrollFixture);
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").as("trigger");
+
+      cy.get("@trigger").click();
+
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("have.attr", "open");
+
+      cy.get("@trigger").click();
+
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("not.have.attr", "open");
+
+      cy.get("@trigger").click();
+
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("have.attr", "open");
+
+      cy.get("#select-box").shadow()
+        .find("ui5-popover").shadow()
+        .find("[part=content]")
+        .invoke("prop", "scrollTop")
+        .should("be.greaterThan", 0);
+    });
+  });
 });

package/cypress/specs/TagGroup.cy.tsx

@@ -95,4 +95,15 @@ describe("TagGroup", () => {
     cy.get("@tagClick").should("have.been.called");
   });
 
+  it("tooltip accessible name is set on the tooltip element", () => {
+    cy.mount(
+      <UDExTagGroup tooltipAccessibleName="Hidden tags">
+        {Array.from({ length: 16 }, (_, i) => <UDExTag text={`Tag ${i + 1}`}></UDExTag>)}
+      </UDExTagGroup>
+    );
+    const nMore = cy.get("[udex-tag-group]").shadow().find(".udex-tag-group__tokenizer").shadow().find(".ui5-tokenizer-more-text");
+    nMore.click();
+    cy.get("[udex-tag-group]").shadow().find("[udex-tooltip]").should("have.attr", "accessible-name", "Hidden tags");
+  });
+
 });

package/cypress/specs/Toast.cy.tsx

@@ -76,27 +76,24 @@ describe("Toast", async () => {
   describe("With Success valueState", () => {
     it("renders sys-enter-2 icon when valueState is Success", () => {
       cy.mount(successToast);
-      cy.get("#successToast").shadow().find(".udex-toast__icon").then($toastIcon => 
-       expect($toastIcon.attr("name")).to.eq("sys-enter-2")
-      )
+      cy.get("#successToast").shadow().find(".udex-toast__icon")
+        .invoke("prop", "name").should("eq", "sys-enter-2")
     });
   })
 
   describe("With Warning valueState", () => {
     it("renders alert icon when valueState is Warning", () => {
       cy.mount(warningToast);
-      cy.get("#warningToast").shadow().find(".udex-toast__icon").then($toastIcon => 
-       expect($toastIcon.attr("name")).to.eq("alert")
-      )
+      cy.get("#warningToast").shadow().find(".udex-toast__icon")
+        .invoke("prop", "name").should("eq", "alert")
     });
   })
 
   describe("With Error valueState", () => {
     it("renders error icon when valueState is Error", () => {
       cy.mount(errorToast);
-      cy.get("#errorToast").shadow().find(".udex-toast__icon").then($toastIcon => 
-        expect($toastIcon.attr("name")).to.eq("error")
-      )
+      cy.get("#errorToast").shadow().find(".udex-toast__icon")
+        .invoke("prop", "name").should("eq", "error")
     });
   })
 });

package/dist/FilterMenu.d.ts

@@ -1,6 +1,7 @@
 import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRole.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
 import "@ui5/webcomponents-fiori/dist/illustrations/NoSearchResults.js";
+import UDExList from "./List.js";
 import type { UDExSearchKeydownEventDetail } from "./Search.js";
 import UDExSearch from "./Search.js";
 import UDExButton from "./Button.js";
@@ -188,6 +189,7 @@ declare class UDExFilterMenu extends UDExSearchableListBase {
     _popover: Popover;
     _breakpointSizeXS: number;
     _initialState: Array<initialItemState>;
+    _list: UDExList;
     onEnterDOM(): void;
     onBeforeRendering(): void;
     onAfterRendering(): void;
@@ -211,6 +213,8 @@ declare class UDExFilterMenu extends UDExSearchableListBase {
     onDropdownClose(e?: KeyboardEvent): void;
     _dropdownBeforeOpen(): void;
     _dropdownAfterOpen(): void;
+    _focusFirstInteractiveElement(): void;
+    _focusSearchInput(): void;
     _getInitialState(items: Array<UDExListItemBase | UDExListGroupHeaderBase>): Array<initialItemState>;
     _setInitialListState(): void;
     _setInitialState(): void;

package/dist/FilterMenu.js

@@ -151,6 +151,7 @@ let UDExFilterMenu = UDExFilterMenu_1 = class UDExFilterMenu extends UDExSearcha
         this._search = this.getSearch();
         this._popover = this.getPopover();
         this._trigger = this.getTriggerButton();
+        this._list = this.getList();
     }
     handleSelectAll(e) {
         this.onSelectAllHeaderPress(e);
@@ -262,8 +263,26 @@ let UDExFilterMenu = UDExFilterMenu_1 = class UDExFilterMenu extends UDExSearcha
         if (this._popover.offsetWidth + popoverLeftOffset < this._breakpointSizeXS) {
             this.style.setProperty("--udex-filter-menu-popover-left-offset", `${this._popover.style.left}`);
         }
+        if (this.modeMultiSelect) {
+            this._focusFirstInteractiveElement();
+        }
+        if (this.modeSingleSelect && !this._search) {
+            this.activeItem?.focus();
+        }
+        this._handleDropdownScroll();
         this.fireDecoratorEvent("after-open");
     }
+    _focusFirstInteractiveElement() {
+        if (this.showSearch && this._search) {
+            this._focusSearchInput();
+            return;
+        }
+        this.focusFirstItem();
+    }
+    _focusSearchInput() {
+        const input = this._search.shadowRoot?.querySelector("[id='search-input']");
+        input.focus();
+    }
     _getInitialState(items) {
         return items.flatMap(item => {
             if (item.isGroup) {