Skip to content

Commit 690bf7c

Browse files
schmunk42schmunk42
authored
Merge pull request jdorn#715 from JElchison/fix-checkbox-labels
Don't display checkbox label when inside object tables
2 parents 65bcc92 + cb91689 commit 690bf7c

File tree

4 files changed

+132
-3
lines changed

4 files changed

+132
-3
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
- Added ability to attache editors and themes style rules to the shadowRoot if the editor is inside a Web Component.
1414
- Fix of #701 - editors/number.js and editors/integer.js don't change values when validation is failed
1515
- Fix of #716 - add ignore for allOf to fall in line with existing ignores of anyOf/oneOf for additionalProperties validation
16+
- Fix of #714 - Checkboxes inside object tables duplicate labels from heading
1617

1718
### 2.0.0-dev
1819
- Fix of #643 - Allow use of themes not compiled directly into the build

‎src/editors/checkbox.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,10 @@ export class CheckboxEditor extends AbstractEditor {
2626
}
2727

2828
build () {
29-
this.label = this.header = this.theme.getCheckboxLabel(this.getTitle(), this.isRequired())
30-
this.label.htmlFor = this.formname
29+
if (!this.parent.options.table_row) {
30+
this.label = this.header = this.theme.getCheckboxLabel(this.getTitle(), this.isRequired())
31+
this.label.htmlFor = this.formname
32+
}
3133

3234
if (this.schema.description) this.description = this.theme.getFormInputDescription(this.schema.description)
3335
if (this.options.infoText && !this.options.compact) this.infoButton = this.theme.getInfoButton(this.options.infoText)

‎tests/codeceptjs/editors/checkbox_test.js

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,18 @@ Feature('checkbox');
44

55
Scenario('should be disabled if "readonly" is specified', async (I) => {
66
I.amOnPage('read-only.html');
7-
I.waitForText('READY', 5, '.state')
7+
I.waitForText('READY', 5, '.state');
88
I.seeDisabledAttribute('[name="root[checkbox]"]');
99
});
10+
11+
Scenario('label should be visible for items at top level, but not in tables', async (I) => {
12+
I.amOnPage('checkbox-labels.html');
13+
I.waitForText('READY', 5, '.state');
14+
I.seeElement('//label[contains(@for, "root[Awesome Compact]")]');
15+
I.seeElement('//label[contains(@for, "root[Awesome Not Compact]")]');
16+
I.dontSeeElement('//label[contains(@for, "root[pets][0][Awesome in Object Table]")]');
17+
I.dontSeeElement('//label[contains(@for, "root[pets][1][Awesome in Object Table]")]');
18+
I.dontSeeElement('//label[contains(@for, "root[pets][2][Awesome in Object Table]")]');
19+
I.dontSeeElement('//label[contains(@for, "root[pets][3][Awesome in Object Table]")]');
20+
I.dontSeeElement('//label[contains(@for, "root[pets][4][Awesome in Object Table]")]');
21+
});

‎tests/pages/checkbox-labels.html

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>checkbox-labels</title>
6+
<script src="../../dist/jsoneditor.js"></script>
7+
</head>
8+
<body>
9+
10+
<textarea class="debug" cols="30" rows="10"></textarea>
11+
<div class="state"></div>
12+
<button class='get-value'>Get Value</button>
13+
<div class='container'></div>
14+
15+
<script>
16+
var container = document.querySelector('.container');
17+
var debug = document.querySelector('.debug');
18+
var getValue = document.querySelector('.get-value');
19+
var state = document.querySelector('.state')
20+
21+
var schema = {
22+
"title": "Person",
23+
"type": "object",
24+
"required": [
25+
"Awesome Compact",
26+
"Awesome Not Compact",
27+
"pets"
28+
],
29+
"properties": {
30+
"Awesome Compact": {
31+
"type": "boolean",
32+
"format": "checkbox",
33+
"options": {
34+
"compact": true
35+
}
36+
},
37+
"Awesome Not Compact": {
38+
"type": "boolean",
39+
"format": "checkbox",
40+
"options": {
41+
"compact": false
42+
}
43+
},
44+
"pets": {
45+
"type": "array",
46+
"format": "table",
47+
"title": "Pets",
48+
"uniqueItems": true,
49+
"items": {
50+
"type": "object",
51+
"title": "Pet",
52+
"properties": {
53+
"type": {
54+
"type": "string",
55+
"enum": [
56+
"cat",
57+
"dog",
58+
"bird",
59+
"reptile",
60+
"other"
61+
],
62+
"default": "dog"
63+
},
64+
"name": {
65+
"type": "string"
66+
},
67+
"Awesome in Object Table": {
68+
"type": "boolean",
69+
"format": "checkbox"
70+
}
71+
}
72+
},
73+
"default": [
74+
{
75+
"type": "dog",
76+
"name": "A"
77+
},
78+
{
79+
"type": "dog",
80+
"name": "B"
81+
},
82+
{
83+
"type": "dog",
84+
"name": "C"
85+
},
86+
{
87+
"type": "dog",
88+
"name": "D"
89+
},
90+
{
91+
"type": "dog",
92+
"name": "E"
93+
}
94+
]
95+
}
96+
}
97+
};
98+
99+
var editor = new JSONEditor(container, {
100+
schema: schema
101+
});
102+
103+
editor.on('ready',function() {
104+
state.innerText = 'READY'
105+
});
106+
107+
getValue.addEventListener('click', function () {
108+
debug.value = JSON.stringify(editor.getValue());
109+
});
110+
111+
</script>
112+
113+
</body>
114+
</html>

0 commit comments

Comments
 (0)