From b4b950431de83a98fbfb124a9d89786488d09073 Mon Sep 17 00:00:00 2001
From: Artem-Babich <artem.babich@devexpress.com>
Date: Tue, 29 Mar 2022 16:09:57 +0400
Subject: [PATCH] prevent chrome from changing checkbox checked state when
 button or link located inside the label is clicked(closes #6949)

---
 .../playback/click/click-command.js           | 17 ++++++++++++----
 .../regression/gh-6949/pages/with-button.html | 16 +++++++++++++++
 .../regression/gh-6949/pages/with-div.html    | 18 +++++++++++++++++
 .../gh-6949/pages/with-link-without-href.html | 18 +++++++++++++++++
 .../regression/gh-6949/pages/with-link.html   | 18 +++++++++++++++++
 .../fixtures/regression/gh-6949/test.js       | 19 ++++++++++++++++++
 .../gh-6949/testcafe-fixtures/with-button.js  | 12 +++++++++++
 .../gh-6949/testcafe-fixtures/with-div.js     | 12 +++++++++++
 .../with-link-without-href.js                 | 12 +++++++++++
 .../gh-6949/testcafe-fixtures/with-link.js    | 20 +++++++++++++++++++
 10 files changed, 158 insertions(+), 4 deletions(-)
 create mode 100644 test/functional/fixtures/regression/gh-6949/pages/with-button.html
 create mode 100644 test/functional/fixtures/regression/gh-6949/pages/with-div.html
 create mode 100644 test/functional/fixtures/regression/gh-6949/pages/with-link-without-href.html
 create mode 100644 test/functional/fixtures/regression/gh-6949/pages/with-link.html
 create mode 100644 test/functional/fixtures/regression/gh-6949/test.js
 create mode 100644 test/functional/fixtures/regression/gh-6949/testcafe-fixtures/with-button.js
 create mode 100644 test/functional/fixtures/regression/gh-6949/testcafe-fixtures/with-div.js
 create mode 100644 test/functional/fixtures/regression/gh-6949/testcafe-fixtures/with-link-without-href.js
 create mode 100644 test/functional/fixtures/regression/gh-6949/testcafe-fixtures/with-link.js

diff --git a/src/client/automation/playback/click/click-command.js b/src/client/automation/playback/click/click-command.js
index 8d42f3fefc..2bc24cdbd3 100644
--- a/src/client/automation/playback/click/click-command.js
+++ b/src/client/automation/playback/click/click-command.js
@@ -98,7 +98,8 @@ class LabelledCheckboxElementClickCommand extends LabelElementClickCommand {
     constructor (eventState, eventArgs) {
         super(eventState, eventArgs);
 
-        this.checkbox = this.input;
+        this.checkbox                           = this.input;
+        this.shouldPreventCheckedChangeInChrome = this._isClickableElementInsideLabel(eventArgs.element);
     }
 
     run () {
@@ -114,7 +115,10 @@ class LabelledCheckboxElementClickCommand extends LabelElementClickCommand {
 
         listeners.removeInternalEventBeforeListener(window, ['change'], onChange);
 
-        if (browserUtils.isChrome && !changed)
+        //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.
+        //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.shouldPreventCheckedChangeInChrome)
             this._ensureCheckboxStateChanged();
     }
 
@@ -123,6 +127,13 @@ class LabelledCheckboxElementClickCommand extends LabelElementClickCommand {
 
         eventSimulator.change(this.checkbox);
     }
+
+    _isClickableElementInsideLabel (element) {
+        const isClickableLink = element.tagName === 'A' && element.getAttribute('href');
+        const isButton        = element.tagName === 'BUTTON';
+
+        return isClickableLink || isButton;
+    }
 }
 
 export default function (eventState, eventArgs) {
@@ -146,5 +157,3 @@ export default function (eventState, eventArgs) {
 
     return new ElementClickCommand(eventState, eventArgs);
 }
-
-
diff --git a/test/functional/fixtures/regression/gh-6949/pages/with-button.html b/test/functional/fixtures/regression/gh-6949/pages/with-button.html
new file mode 100644
index 0000000000..13ab22f7f7
--- /dev/null
+++ b/test/functional/fixtures/regression/gh-6949/pages/with-button.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<div class="checkbox">
+    <input id="checkbox" type="checkbox">
+    <label for="checkbox" id="checkbox-label">
+        I have read and accept
+        <button id="clickable-element" type="button">terms and conditions.</button>
+    </label>
+</div>
+</body>
+</html>
diff --git a/test/functional/fixtures/regression/gh-6949/pages/with-div.html b/test/functional/fixtures/regression/gh-6949/pages/with-div.html
new file mode 100644
index 0000000000..3c42a80d1f
--- /dev/null
+++ b/test/functional/fixtures/regression/gh-6949/pages/with-div.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<div class="checkbox">
+    <input id="checkbox" type="checkbox">
+    <label for="checkbox" id="checkbox-label">
+        I have read and accept
+        <div id="clickable-element" style="background-color: #00FF00; width: 200px; height: 50px;">
+            terms and conditions.
+        </div>
+    </label>
+</div>
+</body>
+</html>
diff --git a/test/functional/fixtures/regression/gh-6949/pages/with-link-without-href.html b/test/functional/fixtures/regression/gh-6949/pages/with-link-without-href.html
new file mode 100644
index 0000000000..703bb57a63
--- /dev/null
+++ b/test/functional/fixtures/regression/gh-6949/pages/with-link-without-href.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<div class="checkbox">
+    <input id="checkbox" type="checkbox">
+    <label for="checkbox" id="checkbox-label">
+        I have read and accept
+        <a id="clickable-element">
+            terms and conditions.
+        </a>
+    </label>
+</div>
+</body>
+</html>
diff --git a/test/functional/fixtures/regression/gh-6949/pages/with-link.html b/test/functional/fixtures/regression/gh-6949/pages/with-link.html
new file mode 100644
index 0000000000..41b5080834
--- /dev/null
+++ b/test/functional/fixtures/regression/gh-6949/pages/with-link.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<div class="checkbox">
+    <input id="checkbox" type="checkbox">
+    <label for="checkbox" id="checkbox-label">
+        I have read and accept
+        <a id="clickable-element" href="#">
+            terms and conditions.
+        </a>
+    </label>
+</div>
+</body>
+</html>
diff --git a/test/functional/fixtures/regression/gh-6949/test.js b/test/functional/fixtures/regression/gh-6949/test.js
new file mode 100644
index 0000000000..8838f374db
--- /dev/null
+++ b/test/functional/fixtures/regression/gh-6949/test.js
@@ -0,0 +1,19 @@
+describe('[Regression](GH-6949)', () => {
+    it('Should change checkbox state when clicking checkbox label', () => {
+        return runTests('./testcafe-fixtures/with-link.js', 'Click checkbox label');
+    });
+    it('Should NOT change checkbox state when clicking a LINK inside the checkbox label', () => {
+        return runTests('./testcafe-fixtures/with-link.js', 'Click link inside checkbox label');
+    });
+    it('Should change checkbox state when clicking a LINK without href attribute inside the checkbox label', () => {
+        //The behaviour in IE is different, so we should to exclude it from this test:
+        return runTests('./testcafe-fixtures/with-link-without-href.js', 'Click link without href inside checkbox label', { skip: 'ie' });
+    });
+    it('Should NOT change checkbox state when clicking a BUTTON inside the checkbox label', () => {
+        //The behaviour in IE is different, so we should to exclude it from this test:
+        return runTests('./testcafe-fixtures/with-button.js', 'Click button inside checkbox label', { skip: 'ie' });
+    });
+    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');
+    });
+});
diff --git a/test/functional/fixtures/regression/gh-6949/testcafe-fixtures/with-button.js b/test/functional/fixtures/regression/gh-6949/testcafe-fixtures/with-button.js
new file mode 100644
index 0000000000..609e83eb63
--- /dev/null
+++ b/test/functional/fixtures/regression/gh-6949/testcafe-fixtures/with-button.js
@@ -0,0 +1,12 @@
+import { Selector } from 'testcafe';
+
+fixture`Getting Started`
+    .page`http://localhost:3000/fixtures/regression/gh-6949/pages/with-button.html`;
+
+test('Click button inside checkbox label', async t => {
+    const button = Selector('#clickable-element');
+    const checkBox = Selector('#checkbox');
+
+    await t.click(button);
+    await t.expect(checkBox.checked).eql(false);
+});
diff --git a/test/functional/fixtures/regression/gh-6949/testcafe-fixtures/with-div.js b/test/functional/fixtures/regression/gh-6949/testcafe-fixtures/with-div.js
new file mode 100644
index 0000000000..745ebdb259
--- /dev/null
+++ b/test/functional/fixtures/regression/gh-6949/testcafe-fixtures/with-div.js
@@ -0,0 +1,12 @@
+import { Selector } from 'testcafe';
+
+fixture`Getting Started`
+    .page`http://localhost:3000/fixtures/regression/gh-6949/pages/with-div.html`;
+
+test('Click div inside checkbox label', async t => {
+    const div = Selector('#clickable-element');
+    const checkBox = Selector('#checkbox');
+
+    await t.click(div);
+    await t.expect(checkBox.checked).eql(true);
+});
diff --git a/test/functional/fixtures/regression/gh-6949/testcafe-fixtures/with-link-without-href.js b/test/functional/fixtures/regression/gh-6949/testcafe-fixtures/with-link-without-href.js
new file mode 100644
index 0000000000..529e447447
--- /dev/null
+++ b/test/functional/fixtures/regression/gh-6949/testcafe-fixtures/with-link-without-href.js
@@ -0,0 +1,12 @@
+import { Selector } from 'testcafe';
+
+fixture`Getting Started`
+    .page`http://localhost:3000/fixtures/regression/gh-6949/pages/with-link-without-href.html`;
+
+test('Click link without href inside checkbox label', async t => {
+    const link = Selector('#clickable-element');
+    const checkBox = Selector('#checkbox');
+
+    await t.click(link);
+    await t.expect(checkBox.checked).eql(true);
+});
diff --git a/test/functional/fixtures/regression/gh-6949/testcafe-fixtures/with-link.js b/test/functional/fixtures/regression/gh-6949/testcafe-fixtures/with-link.js
new file mode 100644
index 0000000000..bb4440aeba
--- /dev/null
+++ b/test/functional/fixtures/regression/gh-6949/testcafe-fixtures/with-link.js
@@ -0,0 +1,20 @@
+import { Selector } from 'testcafe';
+
+fixture`Getting Started`
+    .page`http://localhost:3000/fixtures/regression/gh-6949/pages/with-link.html`;
+
+test('Click checkbox label', async t => {
+    const label = Selector('#checkbox-label');
+    const checkBox = Selector('#checkbox');
+
+    await t.click(label);
+    await t.expect(checkBox.checked).eql(true);
+});
+
+test('Click link inside checkbox label', async t => {
+    const link = Selector('#clickable-element');
+    const checkBox = Selector('#checkbox');
+
+    await t.click(link);
+    await t.expect(checkBox.checked).eql(false);
+});