React warning for update forms

[hein-j]

Before opening, please confirm:

• [X] I have searched for duplicate or closed issues.
• [X] I have read the guide for submitting bug reports.
• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
• [X] I have removed any sensitive information from my code snippets and submission.

App Id

n/a

Region

n/a

Environment name

n/a

Figma File Version (if applicable)

No response

Amplify CLI Version

No response

If applicable, what version of Node.js are you using?

No response

What operating system are you using?

No response

Browser type?

No response

Describe the bug

If I have the following schema:

type Cat @model {
name: String
age: Int
}

and save a Cat with no name (I can because it's an optional field) and then try to update the Cat with an auto-generated UpdateCatForm, I get the following warning in the console:

A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

Expected behavior

The form should handle nullish values coming from Dynamo gracefully.

Reproduction steps

See description.

Project Identifier

No response

Additional information

No response

[ykethan]

Hey @hein-j, I was not able to reproduce the issue. To understand in the UI builder using the updateCat form, did you add a new field then hit update model to update the model in the data modelling page? When i did that I observed the following in the browser console.

additionally, also observed the following when switching from a data modelling page to content. refreshing the page fixed it. we should probably be more explicit for a need to refresh.

[hein-j]

@ykethan - I can repro. Here are the steps:

1. Save a Cat with no name.
2. In your local project, load the cat in the update form. (see code below).
3. Observe React error in console.

The warning by itself is not a problem, but we rely on this component being properly controlled. Since it is not, you can see functionalities break, such as the Reset button not working.

Amplify.configure(awsconfig);

function App() {
  const [cat, setCat] = useState()
 async function load() {
  const cats = await DataStore.query(Cat);
  setCat(cats[0])
  }
  return (
    <AmplifyProvider>
      <button onClick={load}>Click</button>
     <CatUpdateForm cat={cat}/>
    </AmplifyProvider>
  );
}

export default App;