Validation errors in programmatically-set array items do not show up

[jiehanzheng]

The bug may appear when the following conditions are met:

• The schema contains an array
• The schema has a validation constraint (like minLength) on array items
• Some data, whose array item violates the constraint, is passed into JSONEditor via setValue()
• Theme is set to bootstrap2 or bootstrap3
• The correct timing (it is a bug caused by race condition)

One would expect the validation error to show next to the input field, after using setValue().

The current, unexpected behavior is that validation errors do not show up.

This is because the array items are inserted on-the-fly, and the input.controlgroup property may not be ready fast enough, causing addInputError function in the theme to simply return without inserting the error class and error message.

Reproduce this problem on...

• JSFiddle

  • ("minLength": 100 is added to root.parent, which displays just fine because it is ready early enough; however, root.children.0.child_prop did not have any errors displayed)

• Demo page: since this is a rare race condition, some work is needed to reproduce it. Use this as the base, and copy and paste the following into the data textarea, and hit Update Form.

  {
    "parent": "bad value",
    "children": [
      {
        "child_prop": "also bad"
      }
    ]
  }

  More often than not you will not see any errors below the input field for the child.

This PR attempts to fix the problem by adding a wait queue of callbacks that depend on input.controlgroup to be ready. When it is actually ready, callbacks on the queue, including addInputError, will be executed.

[jdorn]

Is this bug specific to the bootstrap themes? I'm wondering if there is a more general way to fix this without adding the same block of code to every theme file. The wait queue logic could potentially be added to theme.js which all the other themes inherit from.

[jiehanzheng]

Yep -- I believe so. The root cause is input.controlgroup not being set when addInputError is set. Only the Bootstrap themes require input.controlgroup in addInputError.

I do agree, though, that duplicating the same code isn't great. theme.js makes sense, but I doubt we can envision all the possible dependencies that every theme will need, and handle the wait queue correctly in a generic way. Perhaps we can have themes call a getter and get back a promise? Although that sounds like an overkill.