From 9ccdf75157376b26e5aa13603b16da10e381e6ba Mon Sep 17 00:00:00 2001 From: Konstantin Gogov Date: Fri, 29 Aug 2025 17:58:34 +0300 Subject: [PATCH 1/3] feat(ui5-shellbar): add preventable search field clear event The cancel button now clears the search field value by default. Previously, the search field value was preserved. To maintain the previous behavior, listen for the search-field-clear event and call preventDefault(). - Add search-field-clear event with preventDefault support - Change default behavior to clear search field value on cancel - Separate clearing behavior from closing behavior - Add comprehensive test coverage for both scenarios Jira: BGSOFUIPIRIN-6909 --- packages/fiori/cypress/specs/ShellBar.cy.tsx | 84 ++++++++++++++++++++ packages/fiori/src/ShellBar.ts | 34 ++++++++ 2 files changed, 118 insertions(+) diff --git a/packages/fiori/cypress/specs/ShellBar.cy.tsx b/packages/fiori/cypress/specs/ShellBar.cy.tsx index cc1a64597b7a..3ba2aae7c630 100644 --- a/packages/fiori/cypress/specs/ShellBar.cy.tsx +++ b/packages/fiori/cypress/specs/ShellBar.cy.tsx @@ -611,6 +611,90 @@ describe("Events", () => { cy.get("@logoClickSmall") .should("have.been.calledOnce"); }); + + it("Test search field clear event default behavior", () => { + cy.mount( + + + + ); + + cy.get("[ui5-shellbar]") + .as("shellbar"); + + // Set up event listener without preventing default + cy.get("@shellbar") + .then(shellbar => { + shellbar.get(0).addEventListener("ui5-search-field-clear", cy.stub().as("searchFieldClear")); + }); + + // Trigger full width search mode by reducing viewport + cy.viewport(400, 800); + + // Click the cancel button + cy.get("@shellbar") + .shadow() + .find(".ui5-shellbar-cancel-button") + .click(); + + // Verify the event was fired + cy.get("@searchFieldClear") + .should("have.been.calledOnce"); + + // Verify search field value is cleared (default behavior) + cy.get("#searchInput") + .should("have.value", ""); + + // Verify search is closed + cy.get("@shellbar") + .should("have.prop", "showSearchField", false); + }); + + it("Test search field clear event can be prevented", () => { + cy.mount( + + + + ); + + cy.get("[ui5-shellbar]") + .as("shellbar"); + + // Set up event listener that prevents default + cy.get("@shellbar") + .then(shellbar => { + shellbar.get(0).addEventListener("ui5-search-field-clear", (event) => { + event.preventDefault(); + }); + shellbar.get(0).addEventListener("ui5-search-field-clear", cy.stub().as("searchFieldClear")); + }); + + // Trigger full width search mode by reducing viewport + cy.viewport(400, 800); + + // The cancel button should be visible in full width search mode + cy.get("@shellbar") + .shadow() + .find(".ui5-shellbar-cancel-button") + .as("cancelButton") + .should("be.visible"); + + // Click the cancel button + cy.get("@cancelButton") + .click(); + + // Verify the event was fired + cy.get("@searchFieldClear") + .should("have.been.calledOnce"); + + // Verify search field value is preserved (due to preventDefault) + cy.get("#searchInput") + .should("have.value", "test search text"); + + // Verify search is closed (this behavior cannot be prevented) + cy.get("@shellbar") + .should("have.prop", "showSearchField", false); + }); }); describe("ButtonBadge in ShellBar", () => { diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts index 99f0a4b72ee1..5cf890525f77 100644 --- a/packages/fiori/src/ShellBar.ts +++ b/packages/fiori/src/ShellBar.ts @@ -124,6 +124,10 @@ type ShellBarSearchFieldToggleEventDetail = { expanded: boolean; }; +type ShellBarSearchFieldClearEventDetail = { + targetRef: HTMLElement; +}; + interface IShellBarSearchField extends HTMLElement { focused: boolean; value: string; @@ -291,6 +295,19 @@ const PREDEFINED_PLACE_ACTIONS = ["feedback", "sys-help"]; bubbles: true, }) +/** + * Fired, when the search cancel button is activated. + * + * **Note:** You can prevent the default behavior (clearing the search field value) by calling `event.preventDefault()`. The search will still be closed. + * @param {HTMLElement} targetRef dom ref of the cancel button element + * @since 2.14.0 + * @public + */ +@event("search-field-clear", { + cancelable: true, + bubbles: true, +}) + /** * Fired, when an item from the content slot is hidden or shown. * **Note:** The `content-item-visibility-change` event is in an experimental state and is a subject to change. @@ -312,6 +329,7 @@ class ShellBar extends UI5Element { "menu-item-click": ShellBarMenuItemClickEventDetail, "search-button-click": ShellBarSearchButtonEventDetail, "search-field-toggle": ShellBarSearchFieldToggleEventDetail, + "search-field-clear": ShellBarSearchFieldClearEventDetail, "content-item-visibility-change": ShellBarContentItemVisibilityChangeEventDetail } @@ -1104,8 +1122,17 @@ class ShellBar extends UI5Element { } _handleCancelButtonPress() { + const cancelButtonRef = this.shadowRoot!.querySelector