Custom ui:widget will not alter the formData

Prerequisites

• I have read the documentation;

Description

When using ui:widget the field will not change the formData of the form, unlike when not using ui:widget any change in the field will be seen in the formData when the form is submitted.

Suggested solution:

Shall I change the formData of the form manually when the field text changes? if so, is there an example to do so?

Steps to Reproduce

1. Create the class that represent the custom UI, and use the following for render:

return (
      <div >
      {this.props.children}   
      </div>
    )

1. Add to the schema.properties "City": {type: "string", title:"City"}
2. Add to the schema.properties "City": { "ui:widget": DefaultInput, classNames: "col-md-4"}

Where City is the name of the custom component. and DefaultInput is the class that represent the custom ui of field.

Expected behavior

To see the value of the custom text field when submit the form:

onSubmit = ({formData}) => console.log(formData);

Actual behavior

What I see is:

{City: undefined}

Version

1.1.4

[MatejBransky]

You must keep the same type of value. Because if you firstly render this widget (I suppose that you use <input>) without the default value then actual value will be undefined or null and later if you type something into the input then it will be a string and React doesn’t like switching the types. If you look into the BaseInput.js you can see that there is condition which sets the null value to the string "".

related SO

[epicfaace]

@akedar21 can you make a new issue with a codepen link so it’s easy to reproduce?