Custom sign up fields not appearing

[melmarshall]

Using @aws-amplify/ui-react version ^0.0.0-next-202110420146

I added a custom component to withAuthenticator() but only the default fields are rendering. Last week it was rendering as expected but then stopped. My code below:

export default withAuthenticator(App, {
  components: {
    SignUp: {
      FormFields() {
        const { validationErrors } = useAuthenticator();
        return (
          <>
            <Authenticator.SignUp.FormFields />

            <TextField
              label="Invite Code"
              labelHidden={true}
              name="invite_code"
              placeholder="Invite Code"
              hasError={!!validationErrors.validInvite}
              errorMessage={validationErrors.validInvite}
            />
          </>
        );
      },
    },
  },
  services: {
    async validateCustomSignUp(formData) {
      // TODO
      return {};
    },
  },
});

Expected: An extra text field should appear in the sign up form but this is what is rendered:

Note: The example from the docs is behaving like this as well even when the code is copied and pasted.

[ericclemmons]

@melalrajhi Can you share more about your environment?

• Operating System?
• Browser?
• How is your app bundled? (e.g. Create React App, Next.js, Webpack, Vite)

Note: The example from the docs is behaving like this as well even when the code is copied and pasted.

Does the example look right in the docs, but just not locally?

[ericclemmons]

This may have been a bug that's since been resolved?

I created a sandbox here to check it here:

https://codesandbox.io/s/718-custom-sign-up-fields-not-appearing-sto5j?file=/src/App.js:0-943

import {
  Authenticator,
  TextField,
  useAuthenticator
} from "@aws-amplify/ui-react";
import "@aws-amplify/ui-react/styles.css";

const components = {
  SignUp: {
    FormFields() {
      const { validationErrors } = useAuthenticator();

      return (
        <>
          <Authenticator.SignUp.FormFields />
          <TextField
            isRequired
            label="Invite Code"
            labelHidden
            name="invite_code"
            placeholder="Invite Code"
            hasError={!!validationErrors.validInvite}
            errorMessage={validationErrors.validInvite}
          />
        </>
      );
    }
  }
};

export default function App() {
  return (
    <Authenticator components={components} initialState="signUp">
      {() => (
        <div className="App">
          <h1>Hello CodeSandbox</h1>
          <h2>Start editing to see some magic happen!</h2>
        </div>
      )}
    </Authenticator>
  );
}

I'm happy to re-open this if we can reproduce what you're seeing.

In the meantime, we're tracking this use-case with tests & examples here:

https://github.com/aws-amplify/amplify-ui/blob/main/examples/next/pages/ui/components/authenticator/custom-sign-up-fields/index.page.tsx

[melmarshall]

@ericclemmons Hi, I'm still seeing this locally. I tried with the version in the sandbox 0.0.0-next-8f4d812-202110168640 and the one I was using locally ^0.0.0-next-202110420146 and still only seeing the default fields.

• OS - MaxOSX 10.15.3
• Browser - Chrome Version 95.0.4638.54 (Official Build) (x86_64)
• App is create-react-app

[ericclemmons]

@melalrajhi I just updated the https://codesandbox.io/s/718-custom-sign-up-fields-not-appearing-sto5j?file=/src/App.js to v2.1.2.

Can you do me a favor & screenshot what you see there?

[ericclemmons]

These bugs may have been related to the preview releases.

I'm happy to re-open this issue if it still persists on latest, but we'll need a reproduction example (like we have in this repo's /examples folder) to continue.