fix(ui5-button): disabled button not execute click event (#6400)

fixes: #6372
SAP · Feb 14, 2023 · fa47576 · fa47576
1 parent 8ecbf32
commit fa47576
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 10 deletions.
diff --git a/packages/main/src/themes/Button.css b/packages/main/src/themes/Button.css
@@ -106,6 +106,9 @@
 	/* calculating the minimum width by removing the icon size  */
 	min-width: calc(var(--_ui5_button_base_min_width) - var(--_ui5_button_base_icon_margin) - 1rem);
 }
+:host([disabled]:active) {
+		pointer-events: none;
+}
 
 :host([focused]) .ui5-button-root:after {
 	content: "";

diff --git a/packages/main/test/pages/Button.html b/packages/main/test/pages/Button.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 	<meta charset="utf-8">
 
 	<title>Button</title>
@@ -13,7 +13,7 @@
 	<script src="../../bundle.esm.js" type="module"></script>
 
 
-    <link rel="stylesheet" type="text/css" href="./styles/Button.css">
+	<link rel="stylesheet" type="text/css" href="./styles/Button.css">
 
 </head>
 
@@ -116,6 +116,8 @@
 	<br/>
 
 	<ui5-button icon-end icon="employee">Icon last</ui5-button>
+	<ui5-button icon="employee" id="disabled-button-icon-only" disabled></ui5-button>
+	<ui5-button id="disabled-button-without-icon" disabled>Disabled Buton</ui5-button>
 
 
 
@@ -172,11 +174,11 @@
 	<ui5-toggle-button design="Emphasized" icon="employee">Emphasized</ui5-toggle-button>
 	<ui5-toggle-button disabled design="Emphasized" icon="employee">Emphasized</ui5-toggle-button>
 
-    <br/>
-    <br/>
-    <ui5-button class="long-button long-button-begin" icon="download">Download</ui5-button>
-    <ui5-button class="long-button" icon="download">Download</ui5-button>
-    <ui5-button class="long-button long-button-end" icon="download">Download</ui5-button>
+	<br/>
+	<br/>
+	<ui5-button class="long-button long-button-begin" icon="download">Download</ui5-button>
+	<ui5-button class="long-button" icon="download">Download</ui5-button>
+	<ui5-button class="long-button long-button-end" icon="download">Download</ui5-button>
 
 	<br/>
 	<br/>
@@ -221,13 +223,15 @@
 				<ui5-button id="closeDialogButton" design="Emphasized">Register</ui5-button>
 			</div>
 		</ui5-dialog>
-    <script>
+	<script>
 		var clickCounter = document.querySelector("#click-counter");
 		var button = document.querySelector("#button1");
 		var disabledButton = document.querySelector("#button-disabled");
+		var disabledButtonIconOnly = document.querySelector("#disabled-button-icon-only");
+		var disabledButtonWithoutIcon = document.querySelector("#disabled-button-without-icon")
 		var clickCount = 0;
 
-		[button, disabledButton].forEach(function (el) {
+		[button, disabledButton, disabledButtonIconOnly, disabledButtonWithoutIcon].forEach(function (el) {
 			el.addEventListener("click", function(event) {
 				clickCount += 1;
 				clickCounter.value = clickCount;

diff --git a/packages/main/test/specs/Button.spec.js b/packages/main/test/specs/Button.spec.js
@@ -48,13 +48,33 @@ describe("Button general interaction", () => {
 	});
 
 	it("tests clicking on disabled button", async () => {
-		const button = await browser.$("#button-disabled").shadow$("button");
+		const button = await browser.$("#button-disabled");
+		const nativeButton = await button.shadow$("button");
 
 		// don't test space and enter, as wdio always fires a click but the browser not.
 		// await button.keys("Space");
 		// await button.keys("Enter");
+
+		await button.click();
+
+		const field = await browser.$("#click-counter");
+		assert.strictEqual(await field.getProperty("value"), "3", "Click should be called 3 times");
+		assert.ok(await nativeButton.hasAttribute("disabled"), )
+	});
+
+	it("tests clicking on disabled button whith Icon", async () => {
+		const button = await browser.$("#disabled-button-icon-only");
+		const buttonIcon = await button.shadow$("[ui5-icon]");
+
+
+		await button.click()
+
 		const field = await browser.$("#click-counter");
 		assert.strictEqual(await field.getProperty("value"), "3", "Click should be called 3 times");
+
+		await buttonIcon.click();
+
+		assert.strictEqual(await field.getProperty("value"), "3", "Click should be called 3 times");
 	});
 
 	it("click should call handler", async () => {