aws-amplify / aws-amplify/amplify-ui
Authenticator error message overflows if message is long
- 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, Angular, Vue, React Native
### Which UI component?
Authenticator, Primitive components
### How is your app built?
next
### What browsers are you seeing the problem on?
_No response_
### Which region are you seeing the problem in?
_No response_
### Please describe your bug.
If a long string is passed as an error message to the authenticator, the message will overflow outside of the container.
e.g.:
### What's the expected behaviour?
The text should fit inside of the error container. One way would be to break up the string onto multiple lines, or the container could be made scrollable.
### Help us reproduce the bug!
Hardcode a long string into the authenticator error message on any framework. E.g. on react, replace the `translate(error)` with a string [here](https://github.com/aws-amplify/amplify-ui/blob/3f3cb772f5fedd7581753dfcec3d68ca3659cb65/packages/react/src/components/Authenticator/shared/RemoteErrorMessage.tsx#L14). Then force a form validation error by typing in an invalid email/password combo.
### Code Snippet
```typescript
// Put your code below this line.
```
### Console log output
_No response_
### Additional information and screenshots
_No response_
Contributor guide
Research direction
Start with packages/react/src/components/Authenticator/shared/RemoteErrorMessage.tsx, replacing the translated error with a long string as described and reproducing the invalid email/password validation case. Confirm that a long authenticator error remains within its container, either by wrapping the text or making the container scrollable, without overflowing.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, nextjs, react, react-native, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100