Cannot unselect a SelectField that is optional

[todda00]

Expected behavior: When a field in the schema is optional, the SelectField will have an option to de-select the selection.

Placeholder works only until the user clicks on the select box, then they are presented with all the options, but no way to remove their selection.

Example schema:

...
minEnrollment: {
    type: Date,
    optional: true,
    label: 'Earliest enrollment term',
  },
...

Example SelectField:

<SelectField
  name="minEnrollment"
  allowedValues={enrollmentRangeOptions()}
  transform={enrollmentRangeDisplay}
  placeholder="--Select Enrollment Term--"
/>

HTML Output (nothing selected yet):

Initial click into dropdown:

HTML Code:

It seems the disabled and hidden need to be removed from the placeholder, although I would think this would have more implications in other use cases. I found #78 referencing the same issue as well.

[radekmie]

I think, that change from:

<option value="" disabled hidden>

to

<option value="" disabled={required} hidden={required}>

would be enough. And now, there's a question - will it break anything?

[radekmie]

Also changing to an <option /> with empty value (the unselected one) could remove it from the model, but this might be tricky, when it will be nested inside an array and an object...

Any thoughts, @todda00?

[todda00]

I just changed the behaviour to <option value="" disabled={props.required} hidden={props.required}> and tested it with the following schema:

nestedObject: {
    type: Object,
  },
  'nestedObject.required': {
    type: Date,
    label: 'Required Selection',
  },
  'nestedObject.optional': {
    type: Date,
    optional: true,
    label: 'Optional Selection',
  },
  arrayOfObjects: {
    type: [Object],
  },
  'arrayOfObjects.$.required': {
    type: String,
    label: 'Required Selection',
    allowedValues: ['one', 'two', 'three'],
  },
  'arrayOfObjects.$.optional': {
    type: String,
    optional: true,
    label: 'Optional Selection',
    allowedValues: ['one', 'two', 'three'],
  },

It worked as expected, I was able to add items to the array, the optional ones can be added, then if removed later, they are removed from the model. The required ones are indeed required. There is some additional consideration required for when no placeholder is present, it should still have a null option to select. I can make a PR for BS4 and have you take a look, and if it looks good I will include BS3. I can do the other 2 as well, I have no semantic experience, but its probably a minor change.

[radekmie]

It looks great, @todda00!