@json-editor/json-editor 2.5.4 → 2.7.0

package/src/themes/bootstrap3.js

@@ -55,6 +55,7 @@ export class bootstrap3Theme extends AbstractTheme {
 
     if (label && (input.type === 'checkbox' || input.type === 'radio')) {
       group.classList.add(input.type)
+      if (infoText) label.appendChild(infoText)
       label.insertBefore(input, label.firstChild)
       group.appendChild(label)
     } else {
@@ -172,14 +173,14 @@ export class bootstrap3Theme extends AbstractTheme {
   getTabHolder (propertyName) {
     const pName = (typeof propertyName === 'undefined') ? '' : propertyName
     const el = document.createElement('div')
-    el.innerHTML = `<ul class='col-md-2 nav nav-pills nav-stacked' id='${pName}' role='tablist'></ul><div class='col-md-10 tab-content well well-small'  id='${pName}'></div>`
+    el.innerHTML = `<ul class='col-md-2 nav nav-pills nav-stacked' id='${pName}' role='tablist'></ul><div class='col-md-10 tab-content active well well-small'  id='${pName}'></div>`
     return el
   }
 
   getTopTabHolder (propertyName) {
     const pName = (typeof propertyName === 'undefined') ? '' : propertyName
     const el = document.createElement('div')
-    el.innerHTML = `<ul class='nav nav-tabs' id='${pName}' role='tablist'></ul><div class='tab-content well well-small'  id='${pName}'></div>`
+    el.innerHTML = `<ul class='nav nav-tabs' id='${pName}' role='tablist'></ul><div class='tab-content active well well-small'  id='${pName}'></div>`
     return el
   }
 

package/src/themes/bootstrap4.js

@@ -135,6 +135,12 @@ export class bootstrap4Theme extends AbstractTheme {
     const min = input.getAttribute('min')
     const max = input.getAttribute('max')
 
+    input.addEventListener('change', () => {
+      if (!input.getAttribute('initialized')) {
+        input.setAttribute('initialized', '1')
+      }
+    })
+
     minusBtn.addEventListener('click', () => {
       if (!input.getAttribute('initialized')) {
         initialize(input, min)
@@ -405,6 +411,7 @@ export class bootstrap4Theme extends AbstractTheme {
 
     const el = document.createElement('h3')
     el.classList.add('card-title')
+    el.classList.add('level-' + pathDepth)
 
     if (typeof text === 'string') {
       el.textContent = text

package/src/themes/spectre.js

@@ -134,7 +134,7 @@ export class spectreTheme extends AbstractTheme {
   getCheckboxLabel (text, req) {
     const el = super.getCheckboxLabel(text, req); const icon = document.createElement('i')
     icon.classList.add('form-icon')
-    el.classList.add('form-checkbox', 'mr-5')
+    el.classList.add('form-checkbox', 'pr-0')
     el.insertBefore(icon, el.firstChild)
     return el
   }
@@ -219,6 +219,7 @@ export class spectreTheme extends AbstractTheme {
 
     if (label && (input.type === 'checkbox' || input.type === 'radio')) {
       group.classList.add(input.type)
+      if (infoText) label.appendChild(infoText)
       label.insertBefore(input, label.firstChild)
       group.appendChild(label)
     } else {

package/src/utilities.js

@@ -86,3 +86,21 @@ export function isInteger (value) {
   const v = parseInt(value)
   return match !== null && !isNaN(v) && isFinite(v)
 }
+
+/* This function generates a uuid.
+https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript
+TODO: It will be probably better to move to: https://www.npmjs.com/package/uuid
+*/
+export function generateUUID () {
+  let d = new Date().getTime()
+
+  if (typeof performance !== 'undefined' && typeof performance.now === 'function') {
+    d += performance.now() /* use high-precision timer if available */
+  }
+
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    const r = (d + Math.random() * 16) % 16 | 0
+    d = Math.floor(d / 16)
+    return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
+  })
+}

package/src/validator.js

@@ -17,7 +17,7 @@ export class Validator {
           return [{
             path,
             property: 'const',
-            message: this.translate('error_const')
+            message: this.translate('error_const', null, schema)
           }]
         }
         return []
@@ -29,7 +29,7 @@ export class Validator {
           return [{
             path,
             property: 'enum',
-            message: this.translate('error_enum')
+            message: this.translate('error_enum', null, schema)
           }]
         }
         return []
@@ -54,7 +54,7 @@ export class Validator {
           return [{
             path,
             property: 'anyOf',
-            message: this.translate('error_anyOf')
+            message: this.translate('error_anyOf', null, schema)
           }]
         }
         return []
@@ -79,7 +79,7 @@ export class Validator {
           errors.push({
             path,
             property: 'oneOf',
-            message: this.translate('error_oneOf', [valid])
+            message: this.translate('error_oneOf', [valid], schema)
           })
           errors.push(...oneofErrors)
         }
@@ -90,7 +90,7 @@ export class Validator {
           return [{
             path,
             property: 'not',
-            message: this.translate('error_not')
+            message: this.translate('error_not', null, schema)
           }]
         }
         return []
@@ -103,7 +103,7 @@ export class Validator {
             return [{
               path,
               property: 'type',
-              message: this.translate('error_type_union')
+              message: this.translate('error_type_union', null, schema)
             }]
           }
         } else {
@@ -115,14 +115,14 @@ export class Validator {
               return [{
                 path,
                 property: 'type',
-                message: this.translate('error_type', [schema.format])
+                message: this.translate('error_type', [schema.format], schema)
               }]
             }
           } else if (!this._checkType(schema.type, value)) {
             return [{
               path,
               property: 'type',
-              message: this.translate('error_type', [schema.type])
+              message: this.translate('error_type', [schema.type], schema)
             }]
           }
         }
@@ -136,7 +136,7 @@ export class Validator {
             return [{
               path,
               property: 'disallow',
-              message: this.translate('error_disallow_union')
+              message: this.translate('error_disallow_union', null, schema)
             }]
           }
         } else {
@@ -145,7 +145,7 @@ export class Validator {
             return [{
               path,
               property: 'disallow',
-              message: this.translate('error_disallow', [schema.disallow])
+              message: this.translate('error_disallow', [schema.disallow], schema)
             }]
           }
         }
@@ -177,7 +177,8 @@ export class Validator {
             property: 'maximum',
             message: this.translate(
               (schema.exclusiveMaximum ? 'error_maximum_excl' : 'error_maximum_incl'),
-              [schema.maximum]
+              [schema.maximum],
+              schema
             )
           }]
         }
@@ -204,7 +205,8 @@ export class Validator {
             property: 'minimum',
             message: this.translate(
               (schema.exclusiveMinimum ? 'error_minimum_excl' : 'error_minimum_incl'),
-              [schema.minimum]
+              [schema.minimum],
+              schema
             )
           }]
         }
@@ -219,7 +221,7 @@ export class Validator {
           errors.push({
             path,
             property: 'maxLength',
-            message: this.translate('error_maxLength', [schema.maxLength])
+            message: this.translate('error_maxLength', [schema.maxLength], schema)
           })
         }
         return errors
@@ -230,7 +232,7 @@ export class Validator {
           return [{
             path,
             property: 'minLength',
-            message: this.translate((schema.minLength === 1 ? 'error_notempty' : 'error_minLength'), [schema.minLength])
+            message: this.translate((schema.minLength === 1 ? 'error_notempty' : 'error_minLength'), [schema.minLength], schema)
           }]
         }
         return []
@@ -241,7 +243,7 @@ export class Validator {
           return [{
             path,
             property: 'pattern',
-            message: (schema.options && schema.options.patternmessage) ? schema.options.patternmessage : this.translate('error_pattern', [schema.pattern])
+            message: (schema.options && schema.options.patternmessage) ? schema.options.patternmessage : this.translate('error_pattern', [schema.pattern], schema)
           }]
         }
         return []
@@ -269,7 +271,7 @@ export class Validator {
               errors.push({
                 path,
                 property: 'additionalItems',
-                message: this.translate('error_additionalItems')
+                message: this.translate('error_additionalItems', null, schema)
               })
               break
               /* Default for `additionalItems` is an empty schema */
@@ -291,7 +293,7 @@ export class Validator {
           return [{
             path,
             property: 'maxItems',
-            message: this.translate('error_maxItems', [schema.maxItems])
+            message: this.translate('error_maxItems', [schema.maxItems], schema)
           }]
         }
         return []
@@ -301,7 +303,7 @@ export class Validator {
           return [{
             path,
             property: 'minItems',
-            message: this.translate('error_minItems', [schema.minItems])
+            message: this.translate('error_minItems', [schema.minItems], schema)
           }]
         }
         return []
@@ -314,7 +316,7 @@ export class Validator {
             return [{
               path,
               property: 'uniqueItems',
-              message: this.translate('error_uniqueItems')
+              message: this.translate('error_uniqueItems', null, schema)
             }]
           }
           seen[valid] = true
@@ -329,7 +331,7 @@ export class Validator {
           return [{
             path,
             property: 'maxProperties',
-            message: this.translate('error_maxProperties', [schema.maxProperties])
+            message: this.translate('error_maxProperties', [schema.maxProperties], schema)
           }]
         }
         return []
@@ -339,7 +341,7 @@ export class Validator {
           return [{
             path,
             property: 'minProperties',
-            message: this.translate('error_minProperties', [schema.minProperties])
+            message: this.translate('error_minProperties', [schema.minProperties], schema)
           }]
         }
         return []
@@ -350,12 +352,13 @@ export class Validator {
           schema.required.forEach(e => {
             if (typeof value[e] !== 'undefined') return
             const editor = this.jsoneditor.getEditor(`${path}.${e}`)
+            if (editor && editor.dependenciesFulfilled === false) return
             /* Ignore required error if editor is of type "button" or "info" */
             if (editor && ['button', 'info'].includes(editor.schema.format || editor.schema.type)) return
             errors.push({
               path,
               property: 'required',
-              message: this.translate('error_required', [schema && schema.properties && schema.properties[e] && schema.properties[e].title ? schema.properties[e].title : e])
+              message: this.translate('error_required', [schema && schema.properties && schema.properties[e] && schema.properties[e].title ? schema.properties[e].title : e], schema)
             })
           })
         }
@@ -402,7 +405,7 @@ export class Validator {
             errors.push({
               path,
               property: 'propertyNames',
-              message: this.translate('error_property_names_false', [k])
+              message: this.translate('error_property_names_false', [k], schema)
             })
             break
           }
@@ -456,14 +459,14 @@ export class Validator {
                 errors.push({
                   path,
                   property: 'propertyNames',
-                  message: this.translate('error_property_names_unsupported', [j])
+                  message: this.translate('error_property_names_unsupported', [j], schema)
                 })
                 return false
             }
             errors.push({
               path,
               property: 'propertyNames',
-              message: this.translate(msg, [k])
+              message: this.translate(msg, [k], schema)
             })
             return false
           })
@@ -482,7 +485,7 @@ export class Validator {
             errors.push({
               path,
               property: 'additionalProperties',
-              message: this.translate('error_additional_properties', [k])
+              message: this.translate('error_additional_properties', [k], schema)
             })
             break
             /* Allowed */
@@ -509,7 +512,7 @@ export class Validator {
                 errors.push({
                   path,
                   property: 'dependencies',
-                  message: this.translate('error_dependency', [d])
+                  message: this.translate('error_dependency', [d], schema)
                 })
               }
             })
@@ -527,20 +530,35 @@ export class Validator {
     const fit = { match: 0, extra: 0 }
     if (typeof value === 'object' && value !== null) {
       /* Work on a copy of the schema */
-      const properties = this._getSchema(givenSchema).properties
-
-      for (const i in properties) {
-        if (!hasOwnProperty(properties, i)) {
-          fit.extra += weight
-          continue
-        }
-        if (typeof value[i] === 'object' && typeof properties[i] === 'object' && typeof properties[i].properties === 'object') {
-          const result = this.fitTest(value[i], properties[i], weight / 100)
-          fit.match += result.match
-          fit.extra += result.extra
+      const schema = this._getSchema(givenSchema)
+      /* If the schema is an anyOf declaration, do use the properties of the allowed sub schemata instead.
+      Of these sub schemata, the best fit is selected */
+      if (schema.anyOf) {
+        let bestFit = { ...fit }
+        for (const subSchema of schema.anyOf) {
+          const subFit = this.fitTest(value, subSchema, weight)
+          /* The best fit is the one with the best value for match. If there are multiple results
+          with the same match value, use the one with the least number of extra properties */
+          if ((subFit.match > bestFit.match) || (subFit.match === bestFit.match && subFit.extra < bestFit.extra)) {
+            bestFit = subFit
+          }
         }
-        if (typeof value[i] !== 'undefined') {
-          fit.match += weight
+        return bestFit
+      } else {
+        const properties = this._getSchema(givenSchema).properties
+        for (const i in properties) {
+          if (!hasOwnProperty(properties, i)) {
+            fit.extra += weight
+            continue
+          }
+          if (typeof value[i] === 'object' && typeof properties[i] === 'object' && typeof properties[i].properties === 'object') {
+            const result = this.fitTest(value[i], properties[i], weight / 100)
+            fit.match += result.match
+            fit.extra += result.extra
+          }
+          if (typeof value[i] !== 'undefined') {
+            fit.match += weight
+          }
         }
       }
     }
@@ -622,7 +640,7 @@ export class Validator {
       return [{
         path,
         property: 'required',
-        message: this.translate('error_notset')
+        message: this.translate('error_notset', null, schema)
       }]
     }
     return []
@@ -697,7 +715,7 @@ export class Validator {
       return [{
         path,
         property: 'format',
-        message: this.translate('error_pattern', ['^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$'])
+        message: this.translate('error_pattern', ['^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$'], schema)
       }]
     }
     return []
@@ -720,7 +738,7 @@ export class Validator {
       return [{
         path,
         property: schema.multipleOf ? 'multipleOf' : 'divisibleBy',
-        message: this.translate('error_multipleOf', [divisor])
+        message: this.translate('error_multipleOf', [divisor], schema)
       }]
     }
     return []
@@ -734,14 +752,14 @@ export class Validator {
         return [{
           path,
           property: 'format',
-          message: this.translate('error_invalid_epoch')
+          message: this.translate('error_invalid_epoch', null, schema)
         }]
       } else if (value !== Math.abs(parseInt(value))) {
         /* not much to check for, so we assume value is ok if it's a positive number */
         return [{
           path,
           property: 'format',
-          message: this.translate(`error_${schema.format.replace(/-/g, '_')}`, [dateFormat])
+          message: this.translate(`error_${schema.format.replace(/-/g, '_')}`, [dateFormat], schema)
         }]
       }
       return []
@@ -770,7 +788,7 @@ export class Validator {
           return [{
             path,
             property: 'format',
-            message: this.translate(`error_${editor.format.replace(/-/g, '_')}`, [errorDateFormat])
+            message: this.translate(`error_${editor.format.replace(/-/g, '_')}`, [errorDateFormat], schema)
           }]
         }
       }
@@ -799,7 +817,7 @@ export class Validator {
         return [{
           path,
           property: 'format',
-          message: this.translate(`error_${schema.format.replace(/-/g, '_')}`, [dateFormat])
+          message: this.translate(`error_${schema.format.replace(/-/g, '_')}`, [dateFormat], schema)
         }]
       }
     } else if (editor) {

package/tests/codeceptjs/codecept.json

@@ -11,7 +11,7 @@
       "browser": "firefox",
       "restart": false,
       "host": "firefox",
-      "smartWait": 5000
+      "smartWait": 10000
     },
     "customHelpers": {
       "require": "./../../config/codeceptjs_helpers.js"

package/tests/codeceptjs/core_test.js

@@ -4,6 +4,11 @@ var assert = require('assert')
 
 Feature('core')
 
+Scenario('should have class je-ready when ready @core @ready', async (I) => {
+  I.amOnPage('ready.html')
+  I.waitForElement('.je-ready')
+})
+
 Scenario('should Disable and enable entire form', async (I) => {
   I.amOnPage('core.html')
   I.seeElement('[data-schemapath="root.name"] input')
@@ -215,3 +220,96 @@ Scenario('should validate against oneOf schemas and display single oneOf and edi
   I.waitForText('Rating Description (but in german)')
   I.seeInSource('Rating Info Text (but in german)')
 })
+
+Scenario('should load internal schema definitions, external schema definitions and external schema properties @core @references', async (I) => {
+  I.amOnPage('references.html')
+  I.waitForText('References JSON Editor Example')
+
+  // internal schema definitions
+  I.waitForElement('[data-schemapath="root.external"]')
+  I.waitForElement('[data-schemapath="root.orgid"]')
+
+  // external schema definitions
+  I.click('Add Person')
+  I.waitForElement('[data-schemapath="root.people.0.name"]')
+  I.waitForElement('[data-schemapath="root.people.0.age"]')
+  I.waitForElement('[data-schemapath="root.people.0.gender"]')
+  I.selectOption('.je-switcher', 'Complex Person')
+  I.waitForElement('[data-schemapath="root.people.0.location.city"]')
+  I.waitForElement('[data-schemapath="root.people.0.location.state"]')
+  I.waitForElement('[data-schemapath="root.people.0.location.citystate"]')
+
+  // external schema properties
+  I.waitForElement('[data-schemapath="root.link.street_address"]')
+})
+
+Scenario('should override error messages if specified in schema options @core @errors-messages', async (I) => {
+  I.amOnPage('error-messages.html')
+  I.waitForText('Error Messages')
+
+  I.waitForText('CUSTOM EN: Value required')
+  I.waitForText('CUSTOM EN: Value must be the constant value')
+  I.waitForText('CUSTOM EN: Value must be at least 6 characters long')
+  I.waitForText('CUSTOM EN: Value must be at most 6 characters long')
+  I.waitForText('CUSTOM EN: Value must validate against at least one of the provided schemas')
+  I.waitForText('CUSTOM EN: Value must validate against exactly one of the provided schemas. It currently validates against 0 of the schemas')
+  I.waitForText('CUSTOM EN: Value must be one of the provided types')
+  I.waitForText('CUSTOM EN: Value must not be one of the provided disallowed types')
+  I.waitForText('CUSTOM EN: Value must not be of type string')
+  I.waitForText('CUSTOM EN: Value must be of type integer')
+  I.waitForText('CUSTOM EN: Value must not validate against the provided schema')
+  I.waitForText('CUSTOM EN: Date must be greater than 1 January 1970')
+  I.waitForText('CUSTOM EN: Value must match the pattern ^[a-zA-Z0-9_]+$')
+  I.waitForText('CUSTOM EN: Value must be a multiple of 5')
+  I.waitForText('CUSTOM EN: Value must be at least 5')
+  I.waitForText('CUSTOM EN: Value must be greater than 5')
+  I.waitForText('CUSTOM EN: Value must be less than 10')
+  I.waitForText('CUSTOM EN: Value must be less than 15')
+  I.waitForText('CUSTOM EN: Object must have at least 1 properties')
+  I.waitForText('CUSTOM EN: Object must have at most 1 properties')
+  I.waitForText('CUSTOM EN: Object is missing the required property \'name\'')
+  I.waitForText('CUSTOM EN: Unsupported propertyName UNSOPPORTED')
+  I.waitForText('CUSTOM EN: Property name fullname cannot match invalid pattern')
+  I.waitForText('CUSTOM EN: Property name fullname cannot match invalid enum')
+  I.waitForText('CUSTOM EN: Property name fullname cannot match invalid maxLength')
+  I.waitForText('CUSTOM EN: Property name fullname exceeds maxLength')
+  I.waitForText('CUSTOM EN: Property name pets does not match pattern')
+  I.waitForText('CUSTOM EN: Property name $pets does not match pattern')
+  I.waitForText('CUSTOM EN: Property name pets does not match the const value')
+  I.waitForText('CUSTOM EN: Property name pets does not match any enum values')
+  I.waitForText('CUSTOM EN: Array must have unique items')
+
+  I.click('Switch to ES')
+
+  I.waitForText('CUSTOM ES: Value required')
+  I.waitForText('CUSTOM ES: Value must be the constant value')
+  I.waitForText('CUSTOM ES: Value must be at least 6 characters long')
+  I.waitForText('CUSTOM ES: Value must be at most 6 characters long')
+  I.waitForText('CUSTOM ES: Value must validate against at least one of the provided schemas')
+  I.waitForText('CUSTOM ES: Value must validate against exactly one of the provided schemas. It currently validates against 0 of the schemas')
+  I.waitForText('CUSTOM ES: Value must be one of the provided types')
+  I.waitForText('CUSTOM ES: Value must not be one of the provided disallowed types')
+  I.waitForText('CUSTOM ES: Value must not be of type string')
+  I.waitForText('CUSTOM ES: Value must be of type integer')
+  I.waitForText('CUSTOM ES: Value must not validate against the provided schema')
+  I.waitForText('CUSTOM ES: Date must be greater than 1 January 1970')
+  I.waitForText('CUSTOM ES: Value must match the pattern ^[a-zA-Z0-9_]+$')
+  I.waitForText('CUSTOM ES: Value must be a multiple of 5')
+  I.waitForText('CUSTOM ES: Value must be at least 5')
+  I.waitForText('CUSTOM ES: Value must be greater than 5')
+  I.waitForText('CUSTOM ES: Value must be less than 10')
+  I.waitForText('CUSTOM ES: Value must be less than 15')
+  I.waitForText('CUSTOM ES: Object must have at least 1 properties')
+  I.waitForText('CUSTOM ES: Object must have at most 1 properties')
+  I.waitForText('CUSTOM ES: Object is missing the required property \'name\'')
+  I.waitForText('CUSTOM ES: Unsupported propertyName UNSOPPORTED')
+  I.waitForText('CUSTOM ES: Property name fullname cannot match invalid pattern')
+  I.waitForText('CUSTOM ES: Property name fullname cannot match invalid enum')
+  I.waitForText('CUSTOM ES: Property name fullname cannot match invalid maxLength')
+  I.waitForText('CUSTOM ES: Property name fullname exceeds maxLength')
+  I.waitForText('CUSTOM ES: Property name pets does not match pattern')
+  I.waitForText('CUSTOM ES: Property name $pets does not match pattern')
+  I.waitForText('CUSTOM ES: Property name pets does not match the const value')
+  I.waitForText('CUSTOM ES: Property name pets does not match any enum values')
+  I.waitForText('CUSTOM ES: Array must have unique items')
+})

package/tests/codeceptjs/editors/advanced_test.js

@@ -3,7 +3,7 @@ Feature('Advanced Editor');
 
 Scenario('test validation & delete', (I) => {
     I.amOnPage('advanced.html');
-    I.seeElement('#valid_indicator');
+    I.retry({ retries: 5, minTimeout: 500 }).seeElement('#valid_indicator');
     I.see('valid', '#valid_indicator');
     I.fillField('root[0][location][city]', 'Stuttgart');
     I.waitForValue("[name='root[0][location][city]']", 'Stuttgart');

package/tests/codeceptjs/editors/array_test.js

@@ -10,6 +10,56 @@ Scenario('should have correct initial value', async (I) => {
   assert.equal(await I.grabValueFrom('.debug'), '[]');
 });
 
+Scenario('unique items arrays sorting @unique-itmes-sorting', async (I) => {
+  I.amOnPage('array-unique-items-sort.html')
+  I.waitForElement('.je-ready', 10)
+  I.click('[data-schemapath="root.items"] .form-control:nth-of-type(1)')
+  I.click('.get-value')
+  assert.equal(await I.grabValueFrom('.debug'), '{"items":["01"]}')
+  I.click('[data-schemapath="root.items"] .form-control:nth-of-type(2)')
+  I.click('.get-value')
+  assert.equal(await I.grabValueFrom('.debug'), '{"items":["01","02"]}')
+  I.click('[data-schemapath="root.items"] .form-control:nth-of-type(3)')
+  I.click('.get-value')
+  assert.equal(await I.grabValueFrom('.debug'), '{"items":["01","02","03"]}')
+  I.click('[data-schemapath="root.items"] .form-control:nth-of-type(4)')
+  I.click('.get-value')
+  assert.equal(await I.grabValueFrom('.debug'), '{"items":["01","02","03","04"]}')
+  I.click('[data-schemapath="root.items"] .form-control:nth-of-type(5)')
+  I.click('.get-value')
+  assert.equal(await I.grabValueFrom('.debug'), '{"items":["01","02","03","04","05"]}')
+  I.click('[data-schemapath="root.items"] .form-control:nth-of-type(6)')
+  I.click('.get-value')
+  assert.equal(await I.grabValueFrom('.debug'), '{"items":["01","02","03","04","05","06"]}')
+  I.click('[data-schemapath="root.items"] .form-control:nth-of-type(7)')
+  I.click('.get-value')
+  assert.equal(await I.grabValueFrom('.debug'), '{"items":["01","02","03","04","05","06","07"]}')
+  I.click('[data-schemapath="root.items"] .form-control:nth-of-type(8)')
+  I.click('.get-value')
+  assert.equal(await I.grabValueFrom('.debug'), '{"items":["01","02","03","04","05","06","07","08"]}')
+  I.click('[data-schemapath="root.items"] .form-control:nth-of-type(9)')
+  I.click('.get-value')
+  assert.equal(await I.grabValueFrom('.debug'), '{"items":["01","02","03","04","05","06","07","08","09"]}')
+  I.click('[data-schemapath="root.items"] .form-control:nth-of-type(10)')
+  I.click('.get-value')
+  assert.equal(await I.grabValueFrom('.debug'), '{"items":["01","02","03","04","05","06","07","08","09","10"]}')
+  I.click('[data-schemapath="root.items"] .form-control:nth-of-type(11)')
+  I.click('.get-value')
+  assert.equal(await I.grabValueFrom('.debug'), '{"items":["01","02","03","04","05","06","07","08","09","10","11"]}')
+  I.click('[data-schemapath="root.items"] .form-control:nth-of-type(12)')
+  I.click('.get-value')
+  assert.equal(await I.grabValueFrom('.debug'), '{"items":["01","02","03","04","05","06","07","08","09","10","11","12"]}')
+  I.click('[data-schemapath="root.items"] .form-control:nth-of-type(13)')
+  I.click('.get-value')
+  assert.equal(await I.grabValueFrom('.debug'), '{"items":["01","02","03","04","05","06","07","08","09","10","11","12","13"]}')
+  I.click('[data-schemapath="root.items"] .form-control:nth-of-type(14)')
+  I.click('.get-value')
+  assert.equal(await I.grabValueFrom('.debug'), '{"items":["01","02","03","04","05","06","07","08","09","10","11","12","13","14"]}')
+  I.click('[data-schemapath="root.items"] .form-control:nth-of-type(15)')
+  I.click('.get-value')
+  assert.equal(await I.grabValueFrom('.debug'), '{"items":["01","02","03","04","05","06","07","08","09","10","11","12","13","14","15"]}')
+});
+
 Scenario('should trigger array (table) editing triggers @retry', async (I) => {
   I.amOnPage('table-move-events.html');
   I.seeElement('[data-schemapath="root.0"]');
@@ -478,6 +528,30 @@ Scenario('should work well with checkbox editors', async (I) => {
   I.dontSee('Checkbox 3');
 });
 
+Scenario('should work well with checkbox editors with infoText', async (I) => {
+  I.amOnPage('array-checkboxes-infotext.html')
+
+  function check (checkboxId, title, infoText) {
+    const label = '//label[@for="' + checkboxId + '"]'
+    I.see(title, label)
+    const infoTextIcon = label + '/span[@class="je-infobutton-icon"]'
+
+    if (infoText) {
+      I.seeElement(infoTextIcon)
+      I.moveCursorTo(infoTextIcon)
+      I.see(infoText, label + '//span[@class="je-infobutton-tooltip"]')
+    } else {
+      I.dontSeeElement(infoTextIcon)
+    }
+  }
+
+  check('root0', 'old a')
+  check('root1', 'b')
+  check('root2', '3')
+  check('root3', '4', 'dd')
+  check('root4', 'e', 'ee')
+})
+
 Scenario('should work well with rating editors', async (I) => {
   I.amOnPage('array-ratings.html');
   I.seeElement('[data-schemapath="root.0"]');