CheckboxInput does not display any InvalidHint to the user

[r-bartolomei]

Checklist

• I have looked into the Readme and Examples, and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Description

If you use additionalSignUpFields option with a type: 'checkbox' that has a validator function (https://auth0.com/docs/libraries/lock/lock-configuration#checkbox-field), the src/ui/input/checkbox_input.jsx is not wrapped within an InputWrap component but within a simple div and as a result, the invalidHint will never be displayed when you press on the Sign Up button.

Reproduction

with the below code:

new Auth0Lock(AUTH0_CLIENT_ID, AUTH0_DOMAIN, {
    container: LOCK_CONTAINER_ID,
    allowLogin: false,
    allowSignUp: true,
    initialScreen: 'signUp',
    mustAcceptTerms: true,
    additionalSignUpFields: [
        {
            type: 'checkbox',
            name: 'newsletter',
            prefill: 'false',
            placeholder: 'I hereby agree that I want to receive marketing emails from your company',
            validator: (value) => ({
                valid: value === 'true',
                hint: 'This is a mandatory field',
            }),
        },
    ],
});

because of valid: value === 'true', the field becomes mandatory (the user needs to check it) before being able to finish the Sign Up.
But because of the missing InputWrap within the CheckboxInput (src/ui/input/checkbox_input.jsx), no error message will be shown to the user if the checkbox is not checked and the user will not know why he can't go through with the sign up process.

As a comparison, src/ui/input/text_input.jsx and src/ui/input/select_input.jsx have the elements wrapped within the InputWrap and those components are displaying the invalidHint correctly.

Additional context

No response

Lock version

"auth0-lock": "12.0.2"

Which browsers have you tested in?

Chrome

[frederikprijck]

Thanks for reaching out. I will look into this and get back to you if I need more info (or have a solution).

[ewanharris]

Hey @r-bartolomei, I just put up a PR that would solve this issue over at #2423. Would love to get your feedback on whether the current styling (checkbox text turned to red) is expected for you if there's an alternative.

[r-bartolomei]

Hey @ewanharris. If the red border is not possible then the checkbox text on default colour I think might look better because it would align with the rest of mandatory fields (if any) as they would not have the text content on red.

[ewanharris]

Sorry for the delay @r-bartolomei, we've chatted about this and after a little investigation I think we might do the following:

1. If invalidHint is provided then we'll only make that text red
2. If invalidHint is not provided, then we'll make the placeholder content red as without that there is no other way to flag the required field

[ewanharris]

Hey @r-bartolomei, this change shipped today in version 12.2.0, thanks for the request!

[r-bartolomei]

@ewanharris Thank you for fixing it!