@sapudex/web-components 2.60.0 → 2.61.0

package/cypress/specs/Carousel.cy.tsx

@@ -139,4 +139,50 @@ describe("UDExCarousel component", () => {
       .find(".udex-carousel__navigation-wrapper")
       .should("exist");
   });
+
+  it("re-enables the next button when a resize reduces items-per-page while on the last page", () => {
+    // Regression test: when on the last page with N items per page and the carousel
+    // shrinks across a breakpoint so fewer items fit per page, there are now items
+    // beyond the current view, so "next" must no longer be disabled.
+    // Both configs still have "many pages", so _hasManyPages does not change and the
+    // fix relies on _onResize recalculating the disabled state after the inner UI5
+    // carousel processes its own resize.
+    //
+    // The inner carousel advances by 1 item per click (overlapping-page behaviour), so
+    // the number of reachable positions = items - ipp + 1.  With 4 slides and ipp=3
+    // at the L breakpoint that is exactly 2 positions — one click reaches the last one
+    // (hasNext = false).  After shrinking to the M breakpoint (ipp=2) there are
+    // 3 reachable positions so hasNext becomes true again.
+    cy.viewport(1280, 900);
+    cy.mount(
+      <UDExCarousel id="carousel" items-per-page="S2 M2 L3 XL3" navigation-placement="bottom">
+        <div>slide 1</div>
+        <div>slide 2</div>
+        <div>slide 3</div>
+        <div>slide 4</div>
+      </UDExCarousel>
+    );
+
+    // L breakpoint (1024-1439px) -> 3 items per page -> 2 reachable positions.
+    // One click reaches the last position where hasNext = false.
+    cy.get("[udex-carousel]")
+      .shadow()
+      .find("[data-ui5-arrow-forward]")
+      .click();
+
+    // At the last reachable position the next button is disabled.
+    cy.get("[udex-carousel]")
+      .shadow()
+      .find("[data-ui5-arrow-forward]")
+      .should("have.attr", "disabled");
+
+    // Shrink to M breakpoint (600-1023px) -> 2 items per page -> 3 reachable positions.
+    // The remaining slide(s) become reachable again, so next must no longer be disabled.
+    cy.viewport(800, 900);
+
+    cy.get("[udex-carousel]")
+      .shadow()
+      .find("[data-ui5-arrow-forward]")
+      .should("not.have.attr", "disabled");
+  });
 });

package/cypress/specs/SecondaryNavigationDesktop.cy.tsx

@@ -26,9 +26,34 @@ const secondaryNavigationWithoutBreadcrumbs = <UDExSecondaryNavigation
 </UDExSecondaryNavigation>
 
 describe("Desktop", () => {
-  beforeEach( () => {
+  // The overflow split (which items are visible vs. moved under "More") is computed by
+  // measuring item-label widths against the rendered web font ('72 Brand Variable') in
+  // reflowItems(). If reflowItems() runs before that font has finished loading, it measures
+  // with fallback metrics and produces a different split — making index-based selectors
+  // (eq(5), eq(6)) and ".udex-secondary-navigation__list-item" counts nondeterministic.
+  // Wait for the font to finish loading, then re-run reflowItems() directly so the split is
+  // recomputed with the final metrics. We call the method rather than resizing the viewport
+  // because a resize fires the component's ResizeObserver asynchronously, and that callback
+  // (via _handleResize) can land after a test opens a dropdown and close it mid-test.
+  const waitForDeterministicReflow = () => {
+    cy.document().then(doc => doc.fonts.ready);
+    cy.get("#secondary-nav").then($nav => {
+      ($nav[0] as unknown as { reflowItems: () => void }).reflowItems();
+    });
+  };
+
+  // The dropdown auto-focuses its first sub-item asynchronously in onAfterRendering.
+  // Keyboard tests that press a key immediately after opening must wait for that focus to
+  // land, otherwise the key is dispatched to whatever element happens to be active.
+  const firstSubItemFocused = () =>
+    cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
+      .shadow().find("udex-secondary-navigation-sub-item").first()
+      .shadow().find(".udex-secondary-navigation__dropdown-item").should("be.focused");
+
+  beforeEach(() => {
     cy.viewport(1920, 1080)
     cy.mount(defaultSecondaryNavigation)
+    waitForDeterministicReflow();
     const itemClickHandler = cy.stub().as("itemClickHandler");
     cy.get("#secondary-nav").then($navigation => {
       $navigation[0].addEventListener("item-click", itemClickHandler)
@@ -217,6 +242,9 @@ describe("Desktop", () => {
     cy.get("udex-secondary-navigation").shadow().find("udex-secondary-navigation-item").first()
     .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
 
+    // Wait for auto-focus to land on the first sub-item before driving the keyboard.
+    firstSubItemFocused();
+
     cy.realPress(["Shift", "Tab"]); // closes dropdown, returns focus to trigger button
     cy.realPress(["Shift", "Tab"]); // moves focus to heading title
 
@@ -234,7 +262,10 @@ describe("Desktop", () => {
   it("moves focus to next item on `More option`", () => {
     cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").eq(6)
     .shadow().find(".udex-secondary-navigation__item").click().realPress("Enter").realPress("Tab").realPress("Enter")
-    cy.get("#secondary-nav").find("udex-button").then($button => {
+    // Use .should (retried) instead of .then (evaluated once): the focus-ring style is
+    // applied after the keyboard navigation settles, so a single read can observe a
+    // transient state.
+    cy.get("#secondary-nav").find("udex-button").should($button => {
         const { borderColor: buttonBorder } = window.getComputedStyle($button[0], "::after")
         expect(buttonBorder).to.eq('rgb(0, 100, 217)');
       })
@@ -299,6 +330,9 @@ describe("Desktop", () => {
     .find(".udex-secondary-navigation__dropdown")
     .should("be.visible");
 
+    // Wait for the auto-focus to land on the first sub-item before pressing Tab.
+    firstSubItemFocused();
+
     // Tab through all 3 sub-items; Tab on the last one (index 2) triggers closeDropdown().
     // No preventDefault() is called, so the browser moves focus to the next nav item (eq(1)).
     cy.realPress("Tab").realPress("Tab").realPress("Tab");
@@ -334,7 +368,7 @@ describe("Desktop", () => {
       .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
 
     cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
-      .then($item => {
+      .should($item => {
         const item = $item[0] as HTMLElement;
         const dropdown = item.shadowRoot!.querySelector<HTMLElement>(".udex-secondary-navigation__dropdown")!;
         const { top } = dropdown.getBoundingClientRect();
@@ -364,6 +398,8 @@ describe("Desktop", () => {
       cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
       .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
 
+      firstSubItemFocused();
+
       cy.realPress("Tab");
 
       cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
@@ -375,6 +411,8 @@ describe("Desktop", () => {
       cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first().click()
       .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
 
+      firstSubItemFocused();
+
       cy.realPress("Escape");
 
       cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
@@ -389,6 +427,7 @@ describe("Desktop", () => {
       .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
 
       // Two ArrowDown presses advance from index 0 to index 2 (secondary nested 3 — the last sub-item).
+      firstSubItemFocused();
       cy.realPress("{downarrow}").realPress("{downarrow}");
 
       // Tab on the last sub-item triggers closeDropdown() in the keydown handler.
@@ -410,6 +449,7 @@ describe("Desktop", () => {
       // Shift+Tab on index 0 triggers closeDropdown() in the keydown handler.
       // No preventDefault() is called, so the browser completes Shift+Tab and returns focus to the
       // trigger button that opened the dropdown.
+      firstSubItemFocused();
       cy.realPress(["Shift", "Tab"]);
 
       cy.get("#secondary-nav").shadow().find("udex-secondary-navigation-item").first()
@@ -425,6 +465,7 @@ describe("Desktop", () => {
 
       // Dropdown opens with focus on first sub-item (secondary nested 1, index 0).
       // Two ArrowDown presses move focus to secondary nested 3 (index 2).
+      firstSubItemFocused();
       cy.realPress("{downarrow}").realPress("{downarrow}").realPress("Enter");
 
       cy.get("@itemClickHandler").should("have.been.called")
@@ -438,6 +479,7 @@ describe("Desktop", () => {
 
       // Two ArrowDown presses reach secondary nested 3 (index 2),
       // one ArrowUp moves back to secondary nested 2 (index 1).
+      firstSubItemFocused();
       cy.realPress("{downarrow}").realPress("{downarrow}").realPress("{uparrow}").realPress("Enter");
 
       cy.get("@itemClickHandler").should("have.been.called")
@@ -450,6 +492,7 @@ describe("Desktop", () => {
       .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
 
       // ArrowDown moves off the first item, then End jumps to the last sub-item (secondary nested 3).
+      firstSubItemFocused();
       cy.realPress("{downarrow}").realPress("End").realPress("Enter");
 
       cy.get("@itemClickHandler").should("have.been.called")
@@ -466,6 +509,7 @@ describe("Desktop", () => {
 
       // Two ArrowDown presses move focus away from the first item,
       // then Home jumps back to secondary nested 1 (index 0).
+      firstSubItemFocused();
       cy.realPress("{downarrow}").realPress("{downarrow}").realPress("Home").realPress("Enter");
 
       cy.get("@itemClickHandler").should("have.been.called")
@@ -485,6 +529,7 @@ describe("Desktop", () => {
 
       // Focus starts on secondary nested 1 (index 0), which has nested items.
       // ArrowRight drills into its nested level without firing sub-item-click.
+      firstSubItemFocused();
       cy.realPress("{rightarrow}");
 
       // The nested level is displayed: back button (index 0) + nested children.
@@ -502,6 +547,7 @@ describe("Desktop", () => {
       .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
 
       // Reset after the click that opened the dropdown, so we only capture ArrowRight side-effects.
+      firstSubItemFocused();
       cy.get("@itemClickHandler").invoke("reset");
 
       cy.realPress("{rightarrow}");
@@ -525,6 +571,7 @@ describe("Desktop", () => {
 
       // Focus is on first sub-item (secondary nested 1, index 0, has nested items).
       // Press Enter to navigate into its nested level via handleEnterAndSpace → handleSubItemClick.
+      firstSubItemFocused();
       cy.realPress("Enter");
 
       // The nested level is displayed: back button (index 0) + nested children.
@@ -542,6 +589,7 @@ describe("Desktop", () => {
       .shadow().find(".udex-secondary-navigation__dropdown").should("be.visible");
 
       // Press Enter on first sub-item (secondary nested 1, index 0, has nested items).
+      firstSubItemFocused();
       cy.realPress("Enter");
 
       cy.get("@itemClickHandler").should("have.been.called")
@@ -556,6 +604,7 @@ describe("Desktop", () => {
       // ArrowRight from secondary nested 1 drills into its nested level (no event, just navigation).
       // ArrowLeft on the back button restores the previous level and focuses secondary nested 1.
       // Enter then activates secondary nested 1, firing item-click.
+      firstSubItemFocused();
       cy.realPress("{rightarrow}").realPress("{leftarrow}").realPress("Enter");
 
       cy.get("@itemClickHandler").should("have.been.called")

package/cypress/specs/SelectBox.cy.tsx

@@ -571,12 +571,17 @@ describe("SelectBox", () => {
 
   it("MultiSelect mode - navigation label is cleared from input after Tab closes the dropdown", () => {
     cy.mount(multiSelect);
-    cy.get("#select-box").shadow()
-      .find(".udex-text-field__search")
-      .click()
-      .realPress("ArrowDown");
+    cy.get("#select-box").shadow().find(".udex-text-field__search").click();
+
+    // Wait for the dropdown to finish opening with the first item (JavaScript) focused before
+    // navigating, otherwise ArrowDown races the open and is consumed by it instead of advancing.
+    cy.get("#select-box").shadow().find(".udex-select-box__dropdown").should("have.attr", "open");
+    cy.get("#select-box").shadow().find("[udex-list-item]").eq(0)
+      .should("have.attr", "_active-descendant");
+
+    // The first item (JavaScript) is focused, so this ArrowDown advances to Python.
+    cy.realPress("ArrowDown");
 
-    // Opening focuses the first item (JavaScript), so the first ArrowDown advances to Python.
     cy.get("#select-box").shadow()
       .find(".udex-text-field__single-label")
       .should("have.text", "Python");
@@ -588,6 +593,33 @@ describe("SelectBox", () => {
       .should("not.exist");
   });
 
+  it("SingleSelect mode - Tab without opening dropdown shows no label in input", () => {
+    cy.mount(shortComponent);
+    cy.get("#select-box").shadow().find(".udex-text-field__search").focus();
+    cy.realPress("Tab");
+    cy.get("#select-box").shadow()
+      .find(".udex-text-field__single-label")
+      .should("not.exist");
+  });
+
+  it("SingleSelect mode - Tab without opening dropdown preserves previously selected item in input", () => {
+    cy.mount(singleSelectPreselected);
+    cy.get("#select-box").shadow().find(".udex-text-field__search").focus();
+    cy.realPress("Tab");
+    cy.get("#select-box").shadow()
+      .find(".udex-text-field__single-label")
+      .should("have.text", "Java");
+  });
+
+  it("MultiSelect mode - Tab without opening dropdown shows no label in input", () => {
+    cy.mount(multiSelect);
+    cy.get("#select-box").shadow().find(".udex-text-field__search").focus();
+    cy.realPress("Tab");
+    cy.get("#select-box").shadow()
+      .find(".udex-text-field__single-label")
+      .should("not.exist");
+  });
+
   it("MultiSelect mode - opening the dropdown with a mouse click focuses the first item", () => {
     cy.mount(multiSelect);
     cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();