[Solved]-Custom widget with input loses focus in react-jsonschema-form when formData is passed as a prop to the form-Reactjs

If you want to track form changes, you can handle it without settingState on every change, instead you can setState on Submit. If you want to pass formData programmatically you can use something as following:

this.state = {
  formData : {
    firstname:'Test first name'
  }
}

Following code works as you expect: (https://jsfiddle.net/tpjL2z06/)

const Form = JSONSchemaForm.default;
const schema = {
      title: "Test Form",
      type: "object",
      properties: {
        firstname: {
          type: "string",
          title: "firstname"
        },
      }
};

const uiSchema = {
  firstname : {
    "ui:widget": (props) => {
      return (
        <div>
          <input type="text"
            value={props.value}
            required={props.required}
            onChange={(event) => props.onChange(event.target.value)} />
        </div>
      );
    }
  }
};

class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      formData : {}
    }
  }

  render() {
    return (
      <div className="App">
        <div>
          <Form 
          schema={schema}
          uiSchema={uiSchema}
          formData={this.state.formData}
          onSubmit={(data)=>{ console.log(data)  }}
          />
        </div>
      </div>
    );
  }

}

ReactDOM.render(<App />, document.querySelector("#app"))