Preselect with default schema values

[johnmorrell]

For enumerated properties presented as a drop down list, where a default value is specified in the schema, it would make sense to pre-select that value. For example, 'red' should be pre selected:

      "colours":{
         "type":"string",
         "enum":[
            "red",
            "green",
            "blue"
         ],
         "default":"red"
      }

[edgarmueller]

Thanks for the report. Yes, that'd make sense if the respective property is not initialized.

[edgarmueller]

@johnmorrell We have made changes that allow options to be passed in into the createAjv function. This enables us to use the useDefaults: true option, which should cover your use case (it's probably best if you take a look at the changes in #1224). Please let us know whether this solves your issue. This change will be part of the 2.2.0 release.

[edgarmueller]

Please re-open if you experience any issues.

[johnmorrell]

Thank you @edgarmueller, I have taken a look at this in v2.1.1-alpha.3

I can see that this is working for regular string types, but it does not appear to support the case where the string is of an enum type, eg:

"colours":{
  "type":"string",
    "enum":[
      "red",
      "green",
      "blue"
  ],
   "default":"red"
}

I think the ideal behaviour would be that not only would the default value be pre selected but also there is not the option to set 'no value' since it is an enum.

[johnmorrell]

There is also an unusual behaviour when a default is set for basic strings (react/material).

If you select the field and try to delete the value, it deletes up to the last character then the default value returns. This is also the case if you select all of the text and attempt to delete.

[edgarmueller]

Thanks for the update. We'll look into it again.

[AlexandraBuzila]

Hi @johnmorrell! I was not able to reproduce the problem with the enums that you mentioned. We also have a test case that verifies the scenario that you mentioned: https://github.com/eclipsesource/jsonforms/blob/master/packages/core/test/util/renderer.test.ts#L593
If you can still reproduce this on your end, could you let me know, if possible, how is your example different than what we test there?

There is also an unusual behaviour when a default is set for basic strings (react/material).

If you select the field and try to delete the value, it deletes up to the last character then the default value returns. This is also the case if you select all of the text and attempt to delete.

I could verify that this is indeed what happens for strings. This is caused by the fact that we are converting empty strings to undefined (see #1168) and the undefined value is instantly converted to the default one. We need to decide how to handle this.

[johnmorrell]

Hi @AlexandraBuzila, thanks for your response. I took another look at this and it seems the enum default values do populate correctly when the enum is defined inline in the schema, but not when they are referenced.

The following schema demonstrates this, where (using JSONForms v2.2.0) I see the first correctly preselect the default value, but not the second.

{
   "type":"object",
   "properties":{
      "color":{
         "type":"string",
         "enum":[
            "red",
            "green",
            "blue"
         ],
         "default":"green"
      },
      "referencedColor":{
         "$ref":"#/definitions/referencedColor"
      }
   },
   "definitions":{
      "referencedColor":{
         "type":"string",
         "enum":[
            "red",
            "green",
            "blue"
         ],
         "default":"green"
      }
   }
}

[AlexandraBuzila]

@johnmorrell I just had a look at references and defaults. This is indeed not working and it seems to be a limitation of ajv: ajv-validator/ajv#337 (comment)

One way of working around this would be to add a default alongside your reference:

{
   "type":"object",
   "properties":{
      "color":{
         "type":"string",
         "enum":[
            "red",
            "green",
            "blue"
         ],
         "default":"green"
      },
      "referencedColor":{
         "$ref":"#/definitions/referencedColor",
         "default":"blue"
      }
   },
   "definitions":{
      "referencedColor":{
         "type":"string",
         "enum":[
            "red",
            "green",
            "blue"
         ],
         "default":"green"
      }
   }
}

[johnmorrell]

Thanks @AlexandraBuzila. I understand the issue now, and thanks for the workaround.

[marshallmcdonnell]

I'm trying to do the same as the original post (display default values for enum). Yet, setting up a jsonforms-react-seed to replicate this example for color does not have the pre-selection.

My repo to try and reproduce this is:
https://github.com/marshallmcdonnell/jsonforms-react-default-test

Schema JSON for the colors with default value:
https://github.com/marshallmcdonnell/jsonforms-react-default-test/blob/master/src/schema.json

UI Schema JSON:
https://github.com/marshallmcdonnell/jsonforms-react-default-test/blob/master/src/uischema.json

Deployment on GitHub Pages to see that the form doesn't auto-populate with "green":
https://marshallmcdonnell.github.io/jsonforms-react-default-test/

I must be missing something. Apologies in advance, new to JSONForms, React, and JavaScript.

JSONForms version: 2.2.3

[edgarmueller]

@marshallmcdonnell Sorry for the late reply: JSON Forms utilizies ajv to set defaults, so you need to create a custom instance and hand it in. In the src/index.tsx file, update the init action call to the following:

const ajv = createAjv({
  useDefaults: true
})
store.dispatch(Actions.init(data, schema, uischema, ajv));

[marshallmcdonnell]

@edgarmueller Awesome, thanks! I'll try that out.

[marshallmcdonnell]

That did it, much appreciated!

[eneufeld]

@edgarmueller I suggest to close this due to f515b14 , what do you think?

[edgarmueller]

@eneufeld Sounds good to me! Closing.