React-jsonschema-form: Asynchronous enumOptions

Created on 23 Nov 2016  路  5Comments  路  Source: rjsf-team/react-jsonschema-form

Prerequisites

  • [x] I have read the documentation;
  • [x] In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.

Description

When the enum list is being asynchronously retrieved enumOptions can come through as a boolean "false" ... at least it can for me with my changes. I suspect it's possible for others as well. It's quite obvious with the next proposed enhancement I'm panning on submitting, but possibly harder to reproduce in the current codebase.

The fix is to convert that "false" value back to an empty array so that the enumOptions.map will not error in the render. The list will temporarily be empty, but better that than erroring and never filling.

The offending line is in StringField.js:

const enumOptions = (schema.enumOptions || Array.isArray(schema.enum)) && optionsList(schema);

As a result enumOptions can effectively become a "false" boolean.

var enumOptions = (schema.enumOptions || Array.isArray(schema.enum)) && optionsList(schema);
if (!enumOptions) {
  enumOptions = [];
}

enumOptions will still evaluate to false, but when it come to the render routine later and it attempts enumOptions.map it won't error.

Later when the data is available it will display correctly.

Steps to Reproduce

  1. [First Step]
    Well, I have a GraphQL query returning data directly into the form.

Even if it's hard to reproduce, I'd suggest that it makes sense to try and keep it typed as an array at all times regardless.

Expected behavior

I think enumOptions should never be a boolean. It can safely be an empty array and still evaluate as false.

Actual behavior

On the initial render for me enumOptions evaluated as "false" while waiting for the GraphQL query to return data. These then failed in the render on the control when it tried to do enumOptions.map on a boolean.

Version

Latest

Most helpful comment

I would like to vote to reopen this. I have 20000 Schools that I need users to pick from.
The ONLY way to do that efficiently is to load the options AFTER their home state has been selected. Even using Flux and tying the schema to the current state, I am unable to update the list of available options.

AJAX option lists are trivial in any other form builder I've ever used, so I think it's a large oversight to not allow this option

All 5 comments

There's no official support for asynchronous enumOptions retrieval. You should only render the form or update its schema once you've successfully fetched these information and updated the schema with them.

I'm reluctant introducing duck typing/casting to prevent misuse of the API. I'm closing this, but feel free to reopen if you feel strongly against this decision.

I would like to vote to reopen this. I have 20000 Schools that I need users to pick from.
The ONLY way to do that efficiently is to load the options AFTER their home state has been selected. Even using Flux and tying the schema to the current state, I am unable to update the list of available options.

AJAX option lists are trivial in any other form builder I've ever used, so I think it's a large oversight to not allow this option

i think having to set form to false and reload the whole form, for one select box, is more costly than if the one box were set up to listen for changes by having that ajax option

Any Update on this ?

There's another issue open with the same info as this one -- https://github.com/rjsf-team/react-jsonschema-form/issues/809 -- please follow that one. That one also has a code example for asynchronously fetching enumOptions, though the fetching code isn't built-in to rjsf.

Was this page helpful?
0 / 5 - 0 ratings