Form Field of type 'pin'

[ueberBrot]

trafficstars

Description

I'm in the process of updating dependencies in my project.

I’m encountering an issue with the field of type pin.

• With version 2.11.3 of @saas-ui/react, it looks as expected:

  

• With version 2.11.4 of @saas-ui/react, it looks different and appears as a normal text input:

  

Here is the relevant code:

<Form
      onSubmit={onSubmit}
      defaultValues={{
        email: email || '',
        code: code || '',
        password: '',
        passwordRepeat: '',
      }}
      schema={schema as any}
    >
      {({ formState, setError }) => {
        setFormErrorRef.current = setError;
        return (
          <VStack spacing={4}>
            <Field
              name="email"
              type="email"
              label="Email"
              placeholder="Your Email"
            />
            <Field id="code" name="code" type="pin" pinLength={6} label="Code" />
            <PasswordInputField
              name="password"
              type="password"
              label="Password"
              placeholder="Enter Password"
            />
            <PasswordInputField
              name="passwordRepeat"
              type="password"
              label="Repeat Password"
              placeholder="Repeat Password"
            />
            <Button sx={{ alignSelf: 'flex-end' }} colorScheme="teal" size="lg" type="submit" isLoading={formState.isSubmitting}>
              Submit
            </Button>
          </VStack>
        );
      }}
    </Form>

Link to Reproduction

No response

Steps to reproduce

1. Create a Field from type pin with 2.11.3 of @saas-ui/react
2. Displayed as expected
3. Upgrade to 2.11.4.
4. Displayed differently

Saas UI Version

2.11.4

Chakra UI Version

2.10.4

Browser

Google Chrome 134.0.6998.117

Operating System

• [x] macOS
• [ ] Windows
• [ ] Linux

Additional Information

No response

[linear[bot]]

SUI-631 Form Field

[ueberBrot]

When I use the Field as a destructured value from the Form of @saas-ui/forms/zod it works as expected.

[Pagebakers]

@ueberBrot does this only happen for the pin field, or also other types?

[ueberBrot]

@Pagebakers to my knowledge only for the type pin. We're using all kinds of field types. It was only caught by our E2E-tests where we used this field during the login.