diff --git a/packages/main/src/CheckBox.ts b/packages/main/src/CheckBox.ts
index f9b38e4e9049..784b522d4e2a 100644
--- 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
index 5d289ca3369d..f74855f31c99 100644
--- a/packages/main/test/pages/CheckBox.html
+++ b/packages/main/test/pages/CheckBox.html
@@ -17,8 +17,8 @@
-
-
+
+
diff --git a/packages/main/test/specs/CheckBox.spec.js b/packages/main/test/specs/CheckBox.spec.js
index 533b969c1f7e..84159c6f05a4 100644
--- 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");