CheckboxInput does not display any InvalidHint to the user

r-bartolomei commented 1 year ago

Checklist

[X] I have looked into the Readme and Examples, and have not found a suitable solution or answer.
[X] I have searched the issues and have not found a suitable solution or answer.
[X] I have searched the Auth0 Community forums and have not found a suitable solution or answer.
[X] 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 commented 1 year ago

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

ewanharris commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

If invalidHint is provided then we'll only make that text red
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 commented 1 year ago

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

r-bartolomei commented 1 year ago

@ewanharris Thank you for fixing it!

auth0 / lock