aws-amplify / aws-amplify/amplify-studio

overrides for Autocomplete component in amplify studio-generated form not working

Open
#1,024 1 comment 1 reaction 0 assignees View on GitHub
bug studio-ui ui-forms
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.