aws-amplify / aws-amplify/amplify-ui
Bug (Primitives): Add isRequired to Field Component Causes Warning In DOM
- 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
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