Create a select field (drop-down) with a valid null-value when selection is empty/cleared

[eLikeInEden]

What do I have to do to get normal looking selection field with only value1 and value2 as choices for the user and the ability to clear it, which will produce null as value in formdata?

I know how to create a select field with a "set of choices", like:

JSONschema { "title": "A form", "description": "A simple form example.", "type": "object", "properties": { "select_static": { "title": "SelectStatic", "type": "string", "oneOf": [ { "const": "value1", "value": "First Choice" }, { "const": "value2", "value": "Second Choice" }, ] } } } UISCHEMA { "select_static": { "ui:path": [ "select_static" ] } } 

However, if I clear the field, then "select_static" drops out of the formData and it will be empty: {}

I need a behaviour, where

1. clearing the selection (by clicking on the empty row in the drop-down) will produce {"select_static": null}
2. submitting the form will not produce a validation error
3. the form will still look like a "normal" selection / drop-down.

I got that adding
"ui:emptyValue": null
to the UISCHEMA will get me Requirement 1, but this will still produce a validation error.

So I also changed JSONschema like this, by making type to an array ["string", "type"] and adding null to oneOf:

JSONschema { "title": "A form", "description": "A simple form example.", "type": "object", "properties": { "select_static": { "title": "SelectStatic", "type": [ "string", "null" ], "oneOf": [ { "const": "value1", "value": "First Choice" }, { "const": "value2", "value": "Second Choice" }, { "const": null } ] } } } UISCHEMA { "select_static": { "ui:path": [ "select_static" ], "ui:emptyValue": null } } 

This will successfully validate (so Requirement 2 fulfilled), but it will also add "null" to the selection list, which is strange for the user: He now has an empty list entry and also the null entry, which both will produce null in the form data. This is not a normal selection list.

(I also tried different other things, but many resulted in a drop-down plus a text field, which really confused me)

Bonus question: i would like to have "null" as the default value (just came to my mind, did not yet test if this is difficult)

What do I have to do to get normal looking selection field with only value1 and value2 as choices for the user and the ability to clear it, which will produce null as value in formdata?

Edit: I used the playground (https://rjsf-team.github.io/react-jsonschema-form/) to fiddle around.

[eLikeInEden]

I figured out that I have to adjust my JSONSchema to the following:

{ "title": "A form", "description": "A simple form example.", "type": "object", "properties": { "select_static": { "title": "SelectStatic", "type": [ "string", "null" ], "oneOf": [ { "const": "value1", "title": "First Choice" }, { "const": "value2", "title": "Second Choice" }, { "type": "null" } ] }, } } 

or

{ "title": "A form", "description": "A simple form example.", "type": "object", "properties": { "select_static": { "title": "SelectStatic", "type": [ "string", "null" ], "oneOf": [ { "type": "string", "oneOf": [ { "const": "value1", "title": "First Choice" }, { "const": "value2", "title": "Second Choice" } ] }, { "type": "null" } ] }, } } 

With any of these JSONschemas, the accepted JSON objects will be:
{"select_static": "value1"}
{"select_static": "value2"}
{"select_static": none}
which is exactly what I want to be valid.

However, with the second JSONschema, rjsf will render the form strangely, it will consist of an input field and a drop-down/select.

What do I have to customize and how do I have to adjust my UIschema, to write my own component, which shall display my own selection drop-down and where I will implement that clearing results in null?
Despite reading the docs I just can't figure out if I have to write a custom template, field or widget....

(Edit: formatting)

[eLikeInEden]

After some further digging in the other rjsf forums for Issues I found this post #4422
and finally adjusted the properties to this:

"select_static": { "title": "SelectStatic", "type": [ "string", "null" ], "oneOf": [ { "const": "value1", "title": "First Choice" }, { "const": "value2", "title": "Second Choice" }, { "const": null, "title": " - " //see below } ], "default": null }, 

This will produce a selection drop-down with three entries.
If I do nothing further, it will show " - " to the user, which will produce null.

To make it a bit more convenient, I have written a customized SelectWidget. It will filter the null-value from the selectable options, before giving it the the Select, because I set isClearable for the Select, which will render an "X" to clear the entry. However, the Select will produce "undefined" when clearing, so my onChange() method of my custom SelectWidget will map this to "null".

( Furthermore I think I have to adjust this behaviour, when considering "required" properties, too. According to JSONschema, a required property with null as value is still valid. So "required" and "null" as default at the same time is not a valid use-case for me. )