aws-amplify / aws-amplify/amplify-studio
overrides for Autocomplete component in amplify studio-generated form not working
- Dominant language
- No language data
- Stars
- 135
- Forks
- 32
- PR merge metrics
- No merged PRs in 30d
Description
### Before opening, please confirm:
- [X] I have [searched for duplicate or closed issues](https://github.com/aws-amplify/amplify-adminui/issues?q=is%3Aissue+).
- [X] I have read the guide for [submitting bug reports](https://github.com/aws-amplify/amplify-adminui/blob/main/CONTRIBUTING.md#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
d20x6uoo2bidyv
### Region
eu-central-1
### Environment name
develop
### Figma File Version (if applicable)
_No response_
### Amplify CLI Version
12.4.0
### 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
I created a form with amplify studio.
In that form i use a relation to another model, which is why an Autocomplete component is included in the form.
However, the Autocomplete component gets wrapped in an ArrayField by Amplify Studio.
While the Autocomplete component has set hideLabel=true, the outer ArrayField is responsible for rendering the label for the construct.
The problem now is, that we cannot override the label for the ArrayField. ArrayField simply misses the line:
{...getOverrideProps(overrides, "FIELDNAME")}
### Expected behavior
Something like
{...getOverrideProps(overrides, "FIELDNAME_container")}
should be included in the outer ArrayField, so we can properly access the label of an Autocomplete Component.
### Reproduction steps
1. Create a graphql schema with two Models with a relation
2. Create a form using Amplify Studio
3. Import that form into your REACT project
4. Try to override the label for the resulting Autocomplete field
### Project Identifier
_No response_
### Additional information
As a workaround, i simply put
{...getOverrideProps(overrides, "FIELDNAME_container")}
in the auto-generated form and am now able to access the label and translate it.
Contributor guide
Research direction
Start by reproducing the relation-based form in Amplify Studio and inspect the generated Autocomplete and surrounding ArrayField. Confirm that the outer ArrayField lacks the reported override prop, then verify that overriding FIELDNAME_container changes the generated field label as expected.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100