aws-amplify / aws-amplify/amplify-ui

Bug (Primitives): Add isRequired to Field Component Causes Warning In DOM

Open
#4,037 0 comments 0 reactions 0 assignees View on GitHub
bug Primitive Studio
Dominant language
TypeScript
Stars
1.1k
Forks
347
Avg merge
18h 29m
Merged PRs (30d)
9

Description

### Before creating a new issue, please confirm:

- [X] I have [searched for duplicate or closed issues](https://github.com/aws-amplify/amplify-ui/issues?q=is%3Aissue+) and [discussions](https://github.com/aws-amplify/amplify-ui/discussions).
- [X] I have tried disabling all browser extensions or using a different browser
- [X] I have tried deleting the node_modules folder and reinstalling my dependencies
- [X] I have read the guide for [submitting bug reports](https://github.com/aws-amplify/amplify-ui/blob/main/CONTRIBUTING.md#bug-reports).

### On which framework/platform are you having an issue?

React

### Which UI component?

Primitive components

### How is your app built?

Next.js

### What browsers are you seeing the problem on?

Chrome

### Please describe your bug.

When you add the `isRequired` prop to a Field component, I see this warning in the console.

```
React does not recognize the `isRequired` prop on a DOM element.
```

I was able to reproduce this when using Studio forms

### What's the expected behaviour?

Should not show warning in console

### Help us reproduce the bug!

Create a new application using Studio. Create a `StorageField` . Set required to true. Pull into app, and look at console.

Or

```
import { Field } from "@aws-amplify/ui-react/internal";
```

```

Some field

```

### Code Snippet

```typescript
// Put your code below this line.

```

### Additional information and screenshots

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the internal React Field component and trace how its isRequired prop reaches the DOM; the issue also identifies StorageField as a Studio-generated entry point. Reproduce the example in a Next.js app and verify that setting isRequired no longer produces the React console warning.

Written by the indexing model from the issue text.

Assessment

Tech stack
next.js, react, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.