AnyOf with a custom widget

[pharzan-sh]

Prerequisites

• [X] I have read the documentation

What theme are you using?

core

What is your question?

I have a type that can be of either string or numeric as below:

    "orientation": {
      "anyOf": [
        {
          "type": "number"
        },
        {
          "type": "string"
        }
      ],
      "title": "Orientation"
    },

I am trying to create a custom widget for the field that is simply an input box but when I replace the widget as something like below:

const CustomString = (props: WidgetProps) => {
    return (
      <input
        title='Orientation'
        className='form-control bg-blue-500 text-4xl'
        onBlur={(event) => props.onChange(event.target.value)}
      />
    );
  };

I get an unexpected two input boxes where if I edit the first one which seems to be for the two "type" fields the value inputted in the second box will not effect the formData.

What is the correct way to handle these types or is there a way to set a default or hide the number, string types drop down?

[heath-freenome]

@pharzan-sh I think that what you want is to use the ui:fieldReplacesAnyOrOneof option in the UiSchema in places where you use the custom widget