Authenticator: SignUp: formFields submitted as empty even though they are filled if Validation fails the first time

k-wolf-dev commented 3 years ago

Before opening, please confirm:

[X] I have searched for duplicate or closed issues and discussions.
[X] I have read the guide for submitting bug reports.
[X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

``` # Put output below this line System: OS: macOS 11.3 CPU: (4) x64 Intel(R) Core(TM) i7-6567U CPU @ 3.30GHz Memory: 3.04 GB / 16.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 14.15.4 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 6.14.10 - /usr/local/bin/npm Browsers: Chrome: 91.0.4472.77 Safari: 14.1 npmPackages: @apollo/client: ^3.3.19 => 3.3.19 @apollo/client/cache: undefined () @apollo/client/core: undefined () @apollo/client/errors: undefined () @apollo/client/link/batch: undefined () @apollo/client/link/batch-http: undefined () @apollo/client/link/context: undefined () @apollo/client/link/core: undefined () @apollo/client/link/error: undefined () @apollo/client/link/http: undefined () @apollo/client/link/persisted-queries: undefined () @apollo/client/link/retry: undefined () @apollo/client/link/schema: undefined () @apollo/client/link/utils: undefined () @apollo/client/link/ws: undefined () @apollo/client/react: undefined () @apollo/client/react/components: undefined () @apollo/client/react/context: undefined () @apollo/client/react/data: undefined () @apollo/client/react/hoc: undefined () @apollo/client/react/hooks: undefined () @apollo/client/react/parser: undefined () @apollo/client/react/ssr: undefined () @apollo/client/testing: undefined () @apollo/client/utilities: undefined () @aws-amplify/ui-components: ^1.3.2 => 1.3.2 @aws-amplify/ui-react: ^1.2.1 => 1.2.1 @sentry/react: ^6.5.1 => 6.5.1 @sentry/tracing: ^6.5.1 => 6.5.1 @testing-library/jest-dom: ^5.11.4 => 5.11.9 @testing-library/react: ^11.1.0 => 11.2.3 @testing-library/user-event: ^12.6.2 => 12.6.2 amplify-ui-components-loader: undefined () aws-amplify: ^4.0.3 => 4.0.3 bey: ^1.1.0 => 1.1.0 bootstrap: ^4.6.0 => 4.6.0 bootstrap-sass: ^3.4.1 => 3.4.1 create-react-app: 4.0.3 => 4.0.3 dayjs: ^1.10.5 => 1.10.5 eslint: ^7.18.0 => 7.18.0 eslint-config-airbnb: ^18.2.1 => 18.2.1 eslint-plugin-import: ^2.22.1 => 2.22.1 eslint-plugin-jest: ^24.1.3 => 24.1.3 eslint-plugin-jsx-a11y: ^6.4.1 => 6.4.1 eslint-plugin-react: ^7.22.0 => 7.22.0 eslint-plugin-react-hooks: ^4.2.0 => 4.2.0 formik: ^2.2.9 => 2.2.9 graphql: ^15.5.0 => 15.5.0 (14.0.0) loglevel: ^1.7.1 => 1.7.1 memo-parser: 0.2.1 nanoid: ^3.1.23 => 3.1.23 node-sass: ^4.14.1 => 4.14.1 plotly.js: ^1.58.4 => 1.58.4 prop-types: ^15.7.2 => 15.7.2 react: ^17.0.2 => 17.0.2 (16.14.0) react-bootstrap: ^1.6.0 => 1.6.0 react-bootstrap/AbstractNav: undefined () react-bootstrap/AbstractNavItem: undefined () react-bootstrap/Accordion: undefined () react-bootstrap/AccordionCollapse: undefined () react-bootstrap/AccordionContext: undefined () react-bootstrap/AccordionToggle: undefined () react-bootstrap/Alert: undefined () react-bootstrap/Badge: undefined () react-bootstrap/BootstrapModalManager: undefined () react-bootstrap/Breadcrumb: undefined () react-bootstrap/BreadcrumbItem: undefined () react-bootstrap/Button: undefined () react-bootstrap/ButtonGroup: undefined () react-bootstrap/ButtonToolbar: undefined () react-bootstrap/Card: undefined () react-bootstrap/CardColumns: undefined () react-bootstrap/CardContext: undefined () react-bootstrap/CardDeck: undefined () react-bootstrap/CardGroup: undefined () react-bootstrap/CardImg: undefined () react-bootstrap/Carousel: undefined () react-bootstrap/CarouselCaption: undefined () react-bootstrap/CarouselItem: undefined () react-bootstrap/CloseButton: undefined () react-bootstrap/Col: undefined () react-bootstrap/Collapse: undefined () react-bootstrap/Container: undefined () react-bootstrap/Dropdown: undefined () react-bootstrap/DropdownButton: undefined () react-bootstrap/DropdownItem: undefined () react-bootstrap/DropdownMenu: undefined () react-bootstrap/DropdownToggle: undefined () react-bootstrap/ElementChildren: undefined () react-bootstrap/Fade: undefined () react-bootstrap/Feedback: undefined () react-bootstrap/Figure: undefined () react-bootstrap/FigureCaption: undefined () react-bootstrap/FigureImage: undefined () react-bootstrap/Form: undefined () react-bootstrap/FormCheck: undefined () react-bootstrap/FormCheckInput: undefined () react-bootstrap/FormCheckLabel: undefined () react-bootstrap/FormContext: undefined () react-bootstrap/FormControl: undefined () react-bootstrap/FormFile: undefined () react-bootstrap/FormFileInput: undefined () react-bootstrap/FormFileLabel: undefined () react-bootstrap/FormGroup: undefined () react-bootstrap/FormLabel: undefined () react-bootstrap/FormText: undefined () react-bootstrap/Image: undefined () react-bootstrap/InputGroup: undefined () react-bootstrap/Jumbotron: undefined () react-bootstrap/ListGroup: undefined () react-bootstrap/ListGroupItem: undefined () react-bootstrap/Media: undefined () react-bootstrap/Modal: undefined () react-bootstrap/ModalBody: undefined () react-bootstrap/ModalContext: undefined () react-bootstrap/ModalDialog: undefined () react-bootstrap/ModalFooter: undefined () react-bootstrap/ModalHeader: undefined () react-bootstrap/ModalTitle: undefined () react-bootstrap/Nav: undefined () react-bootstrap/NavContext: undefined () react-bootstrap/NavDropdown: undefined () react-bootstrap/NavItem: undefined () react-bootstrap/NavLink: undefined () react-bootstrap/Navbar: undefined () react-bootstrap/NavbarBrand: undefined () react-bootstrap/NavbarCollapse: undefined () react-bootstrap/NavbarContext: undefined () react-bootstrap/NavbarToggle: undefined () react-bootstrap/Overlay: undefined () react-bootstrap/OverlayTrigger: undefined () react-bootstrap/PageItem: undefined () react-bootstrap/Pagination: undefined () react-bootstrap/Popover: undefined () react-bootstrap/PopoverContent: undefined () react-bootstrap/PopoverTitle: undefined () react-bootstrap/ProgressBar: undefined () react-bootstrap/ResponsiveEmbed: undefined () react-bootstrap/Row: undefined () react-bootstrap/SafeAnchor: undefined () react-bootstrap/SelectableContext: undefined () react-bootstrap/Spinner: undefined () react-bootstrap/SplitButton: undefined () react-bootstrap/Switch: undefined () react-bootstrap/Tab: undefined () react-bootstrap/TabContainer: undefined () react-bootstrap/TabContent: undefined () react-bootstrap/TabContext: undefined () react-bootstrap/TabPane: undefined () react-bootstrap/Table: undefined () react-bootstrap/Tabs: undefined () react-bootstrap/ThemeProvider: undefined () react-bootstrap/Toast: undefined () react-bootstrap/ToastBody: undefined () react-bootstrap/ToastContext: undefined () react-bootstrap/ToastHeader: undefined () react-bootstrap/ToggleButton: undefined () react-bootstrap/ToggleButtonGroup: undefined () react-bootstrap/Tooltip: undefined () react-bootstrap/createChainedFunction: undefined () react-bootstrap/createWithBsPrefix: undefined () react-bootstrap/divWithClassName: undefined () react-bootstrap/helpers: undefined () react-bootstrap/transitionEndListener: undefined () react-bootstrap/triggerBrowserReflow: undefined () react-bootstrap/types: undefined () react-bootstrap/usePopperMarginModifiers: undefined () react-bootstrap/useWrappedRefWithWarning: undefined () react-date-picker: ^8.2.0 => 8.2.0 react-datetime-picker: ^3.3.0 => 3.3.0 react-dayjs: ^0.2.1 => 0.2.1 react-dom: ^17.0.2 => 17.0.2 react-ga: ^3.3.0 => 3.3.0 react-helmet: ^6.1.0 => 6.1.0 react-plotlyjs: ^0.4.4 => 0.4.4 react-router-dom: ^5.2.0 => 5.2.0 react-scripts: 4.0.3 => 4.0.3 react-table: ^7.7.0 => 7.7.0 source-map-explorer: ^2.5.2 => 2.5.2 web-vitals: ^0.2.4 => 0.2.4 yup: ^0.32.9 => 0.32.9 npmGlobalPackages: eslint: 7.14.0 npm: 6.14.10

Describe the bug

AmplifyAuthenticator does not properly submit filled in formfield text if Create Account had failed validation once. Previously filled in attributes are set as empty (First Name, Given Name)

May be related to bug: aws-amplify/amplify-js#6885

Expected behavior

Expected after correcting issue, previously filled in text would be submitted properly.

Reproduction steps

Use Amplify Authenticator and
Specify custom form fields as below (Email, PasswordFirstName and GIven Name)
Set required both on FormField and individual property
Fill out all information properly but type in a conflicting username that already exists.
Click Create Account
Create Account fails with error (username already exists)
Fix username. All other fields are still filled with proper values. Click Create Account
Form is accepted and account is created
However, FIrstname and gIven name are stored as empty attributes
Note: For 7: In fixing the username, the password is field is warned as being empty when Create Account is clicked even though it is filled. if password field is fixed, then the username is warned as being empty when clicking Create Account. Fixing both at the sametime and clicking Create account works.

Code Snippet

// Put your code below this line.

<AmplifyAuthContainer>
            <AmplifyAuthenticator
              usernameAlias="email"
              initialAuthState={initialState}
              federated={federated}
              hideToast
            >
                <AmplifySignUp
                  slot="sign-up"
                  usernameAlias="email"
                  formFields={[
                      {
                          type: 'email',
                          label: 'Email Address',
                          required: 'true',
                          inputProps: { required: true },
                      },
                      {
                          type: 'password',
                          label: 'Password',
                          required: 'true',
                          hint: 'At least 6 characters. Must contain a number, lower and uppercase and a symbol.',
                          inputProps: { required: true },
                      },
                      {
                          type: 'given_name',
                          label: 'First Name',
                          required: 'true',
                          placeholder: 'First Name',
                          inputProps: { required: true },
                      },
                      {
                          type: 'family_name',
                          label: 'Last Name',
                          required: 'true',
                          placeholder: 'Last Name',
                          inputProps: { required: true },
                      },
                  ]}
                />
            </AmplifyAuthenticator>
        </AmplifyAuthContainer>

### Log output

<details>

// Put your logs below this line



</details>

### aws-exports.js

_No response_

### Manual configuration

_No response_

### Additional configuration

_No response_

### Mobile Device

_No response_

### Mobile Operating System

_No response_

### Mobile Browser

_No response_

### Mobile Browser Version

_No response_

### Additional information and screenshots

_No response_

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale[bot] commented 3 years ago

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.

chrisbonifacio commented 3 years ago

Hi :wave: Sorry this was auto-closed by stale bot. We are working towards preventing this from happening in the future. Please let us know if you are still experiencing this issue and in need of assistance.

k-wolf-dev commented 3 years ago

Thanks @chrisbonifacio. This issue is actually now covered in aws-amplify/amplify-js#8432 which has more details and is still open. Happy to close this one out and refer to aws-amplify/amplify-js#8432. Also, happy to provide more details for the repro. thanks!

ErikCH commented 2 years ago

This is a duplicate of #290 as stated by @k-wolf-dev . I'm closing this issue for now, since it's tracked in 290.

aws-amplify / amplify-ui