reactjs - dropdown fields are not initially populated when form loads

Question

I have a ReactJS page that loads a form into a page with a few input fields and a few dropdown/select fields like this:

    ReactDOM.createPortal(
      <div id="formHome">
          <form onSubmit={handleSubmit}>
             ...// all the fields
          </form>
      </div>
      document.getElementById('app_root')
   )

The form data is populated from a database.

When the form first loads, all the form fields except the the dropdown/select boxes, are populated.

The dropdown/select boxes are just empty.

But when I click on/click off one of the other input fields, the correct values from the database suddenly appear in the dropdown option list.

I am not sure what mechanism is causing this.

I have no code that handles blur or change events, just the onSubmit handler that sends the data to a database.

My onSubmit looks like this:

onSubmit={(values) => {
   axios({
     method: "PUT",
     url: "api/gameData/" + values.id,
     data: JSON.stringify(values),
     headers: { 'Content-Type': 'application/json; charset=utf-8' }
       }).catch((error) => {
              console.log(error.response);
       }).then((response) => {
              console.log(response);
       });

Is there a way to figure out what is going on so that I can fix this?

Thanks!

question from:https://stackoverflow.com/questions/65832410/dropdown-fields-are-not-initially-populated-when-form-loads

Answer 1

Waitting for answers