Prevent chrome from changing checkbox checked state when disabled che…

…ckbox label is clicked(closes DevExpress#6949)
Artem-Babich · Mar 30, 2022 · b6f765a · b6f765a
1 parent 5e06f92
commit b6f765a
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 2 deletions.
diff --git a/src/client/automation/playback/click/click-command.js b/src/client/automation/playback/click/click-command.js
@@ -115,9 +115,10 @@ class LabelledCheckboxElementClickCommand extends LabelElementClickCommand {
         listeners.removeInternalEventBeforeListener(window, ['change'], onChange);
 
         // NOTE: Two overlapping issues: https://github.com/DevExpress/testcafe/issues/3348 and https://github.com/DevExpress/testcafe/issues/6949
-        // When label contains <a href=any> or <button> element, clicking these elements will prevent checkbox from changing checked state.
+        // When label contains <a href=any> or <button> element, clicking these elements should prevent checkbox from changing checked state.
+        // Also, checkbox state should not be changed if it is disabled.
         // We should to leave the code for fixing .focus issue and add additional check for the clickable elements inside the label:
-        if (browserUtils.isChrome && !changed && !this._isClickableElementInsideLabel(this.targetElement))
+        if (browserUtils.isChrome && !changed && !this.checkbox.disabled && !this._isClickableElementInsideLabel(this.targetElement))
             this._ensureCheckboxStateChanged();
     }
 

diff --git a/test/functional/fixtures/regression/gh-6949/pages/with-disabled-checkbox.html b/test/functional/fixtures/regression/gh-6949/pages/with-disabled-checkbox.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<div class="checkbox">
+    <input id="checkbox" disabled type="checkbox">
+    <label for="checkbox" id="checkbox-label">
+        I have read and accept
+    </label>
+</div>
+</body>
+</html>
diff --git a/test/functional/fixtures/regression/gh-6949/test.js b/test/functional/fixtures/regression/gh-6949/test.js
@@ -20,4 +20,8 @@ describe('[Regression](GH-6949)', () => {
     it('Should change checkbox state when clicking a DIV with onclick handler inside the checkbox label', () => {
         return runTests('./testcafe-fixtures/with-div.js', 'Click div inside checkbox label');
     });
+
+    it('Should NOT change checkbox state when clicking the label of the disabled checkbox', () => {
+        return runTests('./testcafe-fixtures/with-disabled-checkbox.js', 'Click disabled checkbox label');
+    });
 });
diff --git a/test/functional/fixtures/regression/gh-6949/testcafe-fixtures/with-disabled-checkbox.js b/test/functional/fixtures/regression/gh-6949/testcafe-fixtures/with-disabled-checkbox.js
@@ -0,0 +1,12 @@
+import { Selector } from 'testcafe';
+
+fixture`Getting Started`
+    .page`http://localhost:3000/fixtures/regression/gh-6949/pages/with-disabled-checkbox.html`;
+
+test('Click disabled checkbox label', async t => {
+    const label = Selector('#checkbox-label');
+    const checkBox = Selector('#checkbox');
+
+    await t.click(label);
+    await t.expect(checkBox.checked).eql(false);
+});