fix(ui5-checkbox): improved key down behavior for readonly state (#8226)

* fix(ui5-checkbox): improved key down behavior for readonly state Previously while holding "Space" or "Enter" key on a readonly checkbox the "active" attribute was being applied on the checkbox main DOM node. This was resulting in bluish tint over the readonly checkbox indicating changing of value where this shouldn't be possible. This wrong behavior is now fixed and "Space" or "Enter" keys down no longer affect readonly checkbox. Fixes: #7807
SAP · Feb 2, 2024 · faec0ef · faec0ef
1 parent 33e059b
commit faec0ef
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 4 deletions.
diff --git a/packages/main/src/CheckBox.ts b/packages/main/src/CheckBox.ts
@@ -321,13 +321,17 @@ class CheckBox extends UI5Element implements IFormElement {
 	_onkeydown(e: KeyboardEvent) {
 		if (isSpace(e)) {
 			e.preventDefault();
-			this.active = true;
+		}
+
+		if (this.readonly || this.disabled) {
+			return;
 		}
 
 		if (isEnter(e)) {
 			this.toggle();
-			this.active = true;
 		}
+
+		this.active = true;
 	}
 
 	_onkeyup(e: KeyboardEvent) {

diff --git a/packages/main/test/pages/CheckBox.html b/packages/main/test/pages/CheckBox.html
@@ -17,8 +17,8 @@
 
 <body class="checkbox1auto">
 	<ui5-checkbox text="Option"></ui5-checkbox>
-	<ui5-checkbox id="cbError" readonly text="Option"></ui5-checkbox>
-	<ui5-checkbox id="cbError" disabled text="Option"></ui5-checkbox>
+	<ui5-checkbox id="cbReadonly" readonly text="Option"></ui5-checkbox>
+	<ui5-checkbox id="cbDisabled" disabled text="Option"></ui5-checkbox>
 	<ui5-checkbox id="cbError" value-state="Error" text="Option"></ui5-checkbox>
 	<ui5-checkbox id="truncatingCb" text="Long long long text that should truncate at some point" class="checkbox2auto"></ui5-checkbox>
 	<ui5-checkbox text="Long long long text that should truncate at some point"></ui5-checkbox>

diff --git a/packages/main/test/specs/CheckBox.spec.js b/packages/main/test/specs/CheckBox.spec.js
@@ -1,4 +1,8 @@
 import { assert } from "chai";
+const KEYS = {
+	ENTER: '\uE007',
+	SPACE: '\ue00D',
+}
 
 describe("CheckBox general interaction", () => {
 	before(async () => {
@@ -22,6 +26,32 @@ describe("CheckBox general interaction", () => {
 		assert.strictEqual(await field.getProperty("value"), "3", "Change event should be fired 3 times");
 	});
 
+	it("tests readonly space and enter keys active state", async () => {
+		const checkBox = await browser.$("#cbReadonly");
+
+		await checkBox.click(); // force focus
+
+		// Setup for SPACE Key
+		await browser.performActions([{
+			type: 'key',
+			id: 'keyboard3',
+			actions: [{ type: 'keyDown', value: KEYS.SPACE }],
+			}]);
+		// Action
+		assert.strictEqual(await checkBox.getAttribute("active"), null, "Space doesn't trigger active attr");
+		await browser.releaseActions();
+
+		// Setup for ENTER Key
+		await browser.performActions([{
+			type: 'key',
+			id: 'keyboard3',
+			actions: [{ type: 'keyDown', value: KEYS.ENTER }],
+			}]);
+		// Action
+		assert.strictEqual(await checkBox.getAttribute("active"), null, "Enter doesn't trigger active attr");
+		await browser.releaseActions();
+	});
+
 	it("tests change event not fired, when disabled", async () => {
 		const checkBox = await browser.$("#cb2");
 		const field = await browser.$("#field");