Merge pull request jdorn#715 from JElchison/fix-checkbox-labels

Don't display checkbox label when inside object tables
btsimonh · Apr 16, 2020 · 690bf7c · 690bf7c
2 parents 65bcc92 + cb91689
commit 690bf7c
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,7 @@
 - Added ability to attache editors and themes style rules to the shadowRoot if the editor is inside a Web Component.
 - Fix of #701 - editors/number.js and editors/integer.js don't change values when validation is failed
 - Fix of #716 - add ignore for allOf to fall in line with existing ignores of anyOf/oneOf for additionalProperties validation
+- Fix of #714 - Checkboxes inside object tables duplicate labels from heading
 
 ### 2.0.0-dev
   - Fix of #643 - Allow use of themes not compiled directly into the build

diff --git a/src/editors/checkbox.js b/src/editors/checkbox.js
@@ -26,8 +26,10 @@ export class CheckboxEditor extends AbstractEditor {
   }
 
   build () {
-    this.label = this.header = this.theme.getCheckboxLabel(this.getTitle(), this.isRequired())
-    this.label.htmlFor = this.formname
+    if (!this.parent.options.table_row) {
+      this.label = this.header = this.theme.getCheckboxLabel(this.getTitle(), this.isRequired())
+      this.label.htmlFor = this.formname
+    }
 
     if (this.schema.description) this.description = this.theme.getFormInputDescription(this.schema.description)
     if (this.options.infoText && !this.options.compact) this.infoButton = this.theme.getInfoButton(this.options.infoText)

diff --git a/tests/codeceptjs/editors/checkbox_test.js b/tests/codeceptjs/editors/checkbox_test.js
@@ -4,6 +4,18 @@ Feature('checkbox');
 
 Scenario('should be disabled if "readonly" is specified', async (I) => {
   I.amOnPage('read-only.html');
-  I.waitForText('READY', 5, '.state')
+  I.waitForText('READY', 5, '.state');
   I.seeDisabledAttribute('[name="root[checkbox]"]');
 });
+
+Scenario('label should be visible for items at top level, but not in tables', async (I) => {
+  I.amOnPage('checkbox-labels.html');
+  I.waitForText('READY', 5, '.state');
+  I.seeElement('//label[contains(@for, "root[Awesome Compact]")]');
+  I.seeElement('//label[contains(@for, "root[Awesome Not Compact]")]');
+  I.dontSeeElement('//label[contains(@for, "root[pets][0][Awesome in Object Table]")]');
+  I.dontSeeElement('//label[contains(@for, "root[pets][1][Awesome in Object Table]")]');
+  I.dontSeeElement('//label[contains(@for, "root[pets][2][Awesome in Object Table]")]');
+  I.dontSeeElement('//label[contains(@for, "root[pets][3][Awesome in Object Table]")]');
+  I.dontSeeElement('//label[contains(@for, "root[pets][4][Awesome in Object Table]")]');
+});
diff --git a/tests/pages/checkbox-labels.html b/tests/pages/checkbox-labels.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>checkbox-labels</title>
+  <script src="../../dist/jsoneditor.js"></script>
+</head>
+<body>
+
+<textarea class="debug" cols="30" rows="10"></textarea>
+<div class="state"></div>
+<button class='get-value'>Get Value</button>
+<div class='container'></div>
+
+<script>
+  var container = document.querySelector('.container');
+  var debug = document.querySelector('.debug');
+  var getValue = document.querySelector('.get-value');
+  var state = document.querySelector('.state')
+
+  var schema = {
+    "title": "Person",
+    "type": "object",
+    "required": [
+      "Awesome Compact",
+      "Awesome Not Compact",
+      "pets"
+    ],
+    "properties": {
+      "Awesome Compact": {
+        "type": "boolean",
+        "format": "checkbox",
+        "options": {
+          "compact": true
+        }
+      },
+      "Awesome Not Compact": {
+        "type": "boolean",
+        "format": "checkbox",
+        "options": {
+          "compact": false
+        }
+      },
+      "pets": {
+        "type": "array",
+        "format": "table",
+        "title": "Pets",
+        "uniqueItems": true,
+        "items": {
+          "type": "object",
+          "title": "Pet",
+          "properties": {
+            "type": {
+              "type": "string",
+              "enum": [
+                "cat",
+                "dog",
+                "bird",
+                "reptile",
+                "other"
+              ],
+              "default": "dog"
+            },
+            "name": {
+              "type": "string"
+            },
+            "Awesome in Object Table": {
+              "type": "boolean",
+              "format": "checkbox"
+            }
+          }
+        },
+        "default": [
+          {
+            "type": "dog",
+            "name": "A"
+          },
+          {
+            "type": "dog",
+            "name": "B"
+          },
+          {
+            "type": "dog",
+            "name": "C"
+          },
+          {
+            "type": "dog",
+            "name": "D"
+          },
+          {
+            "type": "dog",
+            "name": "E"
+          }
+        ]
+      }
+    }
+  };
+
+  var editor = new JSONEditor(container, {
+    schema: schema
+  });
+
+  editor.on('ready',function() {
+    state.innerText = 'READY'
+  });
+
+  getValue.addEventListener('click', function () {
+    debug.value = JSON.stringify(editor.getValue());
+  });
+
+</script>
+
+</body>
+</html>