React-jsonschema-form: Select Box from enums always has one empty value in dropdown

[miswartz]

Description

Select Boxes generated from enums in schema file always have one empty selectable value in dropdown

Expected behavior

The drop down from the select box only has the enums, not an empty box

Just look at the live playground go to numbers -> number enum and click the dropdown, you will see that one of the dropdown selectable values is just a blank value.

This should not be the case.

[glasserc]

The UX of a <select> element in HTML is a bit underdefined. Often, when you present a user with a form, you want to have some "fresh" state that indicates that the user hasn't entered anything yet. Of course, this state isn't "real" or valid in terms of user input, but it is the initial state so we have to have a way to represent it. In HTML, the way to represent it is to add an <option>. There isn't really any other way as far as I know, although I see that some people like to add a disabled attribute to the option to make it unselectable. Do you know of a better way?

[n1k0]

We introduced a distinction between form UI state and formData state at some point while developing this lib. I was against it, but many people expressed concerns with the lib not embracing the traditional forms UX expected by "regular Web users".

If it was just me, if a schema expressed a constraint where a field should be a value part of a defined enum like 1, 2 or 3, I'd render the select box with the first value selected, and if the end users aren't happy with that default value they can update it by picking another option. But I was explained that this was confusing and not matching traditional ways of rendering selects, where usually a first option tells the user to Select an option.

We can always revisit this decision though. The thing is it seems many people have very different opinions on the matter, and I'm a little exhausted trying to match everybody's expectations.

[miswartz]

@n1k0 Thanks for the breakdown that explains the issue. I found a workaround from your hint. If you set "default" to one of the enum values the blank space disappears and you can only select from valid enums. This works well enough for now.

The purpose of the "select a box" is when you want the user to purposely select a box and not accidentally just leave something as the default or first value from the enum. They NEED to select one of the values, they can't just leave it.

The UI placeholder works for this purpose at the moment as well so I dont think we need any more activity on this thread. Thanks for all your help.

[zhirzh]

Why was the issue closed? I see that @v-miswar found a workaround that suited his needs but that isn't a proper fix. How about adding a new option to UI schema that "disables" the _one empty selectable value_?

[elyobo]

Presumably because you the original reporter resolved his issue.

His reported solution does solve yours too though @zhirzh; just specify a default value for whichever you want to be the default. If you don't care what it is, then just set it to the first item in your enum, then the first item in the list will be the default and no extra empty option will be injected.

[huhuaaa]

I set a 'default' value, but the empty selectable still in dropdown.

[epicfaace]

@huhuaaa Can you send a playground link so we can reproduce?

[MatinF]

We have an enum dropdown with Disable/Enable.

If we use the enum values 0 and 1 for these, the blank field is there (though we can set a default value of 0 to avoid this showing unless the user clicks the dropdown).

If we use the enum values 1 and 2, the blank field is gone. This seems to resolve the issue where people want to avoid the blank field, but it also seems a bit "hacky" - is this an intentional behavior?

Best,
Martin

[epicfaace]

@MatinF Please send me a playground link to reproduce. When I try both of your cases, I can see a blank field in both cases.

[MatinF]

@epicfaace You should be able to get the result in this below schema in the playground by varying the "Disable" enum (and corresponding default value) between 0 and 1. With 0, it produces a dropdown in which the blank field is available, while with 1 the blank field is not available.

We're not sure if this is working as intended or a bug?

{
  "type": "object",
  "properties": {
    "bit_rate_fd": {
      "title": "Bit-rate FD",
      "type": "integer",
      "default":0,
      "anyOf": [
        {
          "title": "Disable",
          "enum": [0]
        },
        {
          "title": "1M",
          "enum": [
            1000000
          ]
        },
        {
          "title": "2M",
          "enum": [
            2000000
          ]
        },
        {
          "title": "5M",
          "enum": [
            4000000
          ]
        }
      ]
    }
  }
}

[epicfaace]

Thanks for the sample. Yes, it seems like the problem is that when the default is set to 0 or "", it is showing an empty value, while it should not be showing the empty value.

Here's a reproducible playground link

[epicfaace]

Oh, just saw you created an issue for this in #1177. Will close this issue as that one is clearer. Thanks!