fix(ui5-toolbar): disable click events on disabled buttons (#11847)

Co-authored-by: PetyaMarkovaBogdanova <[email protected]>

Author: Petya Markova

packages/main/cypress/specs/Toolbar.cy.tsx

@@ -458,4 +458,34 @@ describe("Toolbar Select", () => {
 			});
 		});
 	});
-});
+});
+
+describe("Toolbar Button", () => {
+	it("Should not trigger click event on disabled button", () => {
+		// Use cy.mount to create the toolbar with buttons and input field
+		cy.mount(
+			<div>
+				<Toolbar id="test-toolbar">
+					<ToolbarButton disabled>Disabled Button</ToolbarButton>
+					<ToolbarButton
+						onClick={() => {
+							const input = document.getElementById("value-input") as HTMLInputElement;
+							input.value = (parseInt(input.value, 10) + 1).toString();
+						}}
+					>
+						Enabled Button
+					</ToolbarButton>
+					<input id="value-input" type="number" defaultValue="0" />
+				</Toolbar>
+			</div>
+		);
+
+		// Test clicking the disabled button
+		cy.get("ui5-toolbar-button[disabled]").realClick();
+		cy.get("#value-input").should("have.value", "0");
+
+		// Test clicking the non-disabled button
+		cy.get("ui5-toolbar-button:not([disabled])").realClick();
+		cy.get("#value-input").should("have.value", "1");
+	});
+});

packages/main/src/ToolbarButton.ts

@@ -7,7 +7,6 @@ import type ButtonDesign from "./types/ButtonDesign.js";
 
 import ToolbarItem from "./ToolbarItem.js";
 import ToolbarButtonTemplate from "./ToolbarButtonTemplate.js";
-
 import ToolbarButtonCss from "./generated/themes/ToolbarButton.css.js";
 
 type ToolbarButtonAccessibilityAttributes = ButtonAccessibilityAttributes;

packages/main/src/themes/ToolbarButton.css

@@ -1,3 +1,6 @@
+:host([disabled]:active) {
+	pointer-events: none;
+}
 .ui5-tb-popover-item.ui5-tb-button::part(button) {
 	justify-content: start;
 }