Required Validation not working on multiselect and multiselect-checkboxes

[luca-peruzzo]

Hi @garronej this is more a request for clarification than an issue, but if I override kcContext with custom fileds (like your favourite-pet implementation) I can't se any required validation for multiselect and multiselect-checkboxes.
is it done on purpose? if yes, why?
I've tried it on angular, does it work on react?
This is my code:

  window.kcContext = getKcContextMock({
    pageId: 'register.ftl',
    overrides: {
      profile: {
        attributesByName: {
          favoritePet: {
            name: 'favorite-pet',
            displayName: '${profile.attributes.favoritePet}',
            validators: {
              options: {
                options: ['cat', 'dog', 'fish'],
              },
            },
            annotations: {
              inputType: 'multiselect',
              inputOptionLabelsI18nPrefix: 'profile.attributes.favoritePet.options',
            },
            required: true,
            readOnly: false,
          } satisfies Attribute,
        },
      },
      'x-keycloakify': {
        messages: {
          'profile.attributes.favoritePet': 'Favorite Pet',
          'profile.attributes.favoritePet.options.cat': 'Fluffy Cat',
          'profile.attributes.favoritePet.options.dog': 'Loyal Dog',
          'profile.attributes.favoritePet.options.fish': 'Peaceful Fish',
        },
      },
    },
  });

FYI @kathari00

[garronej]

Hello @luca-peruzzo,

I don't know, I'm not aware of any validation that would be missing but it's very much possible.

You can try simply with the react project with:

git clone https://github.com/keycloakify/keycloakify-starter
cd keycloakify-starter
yarn
npx keycloakify start-keycloak

Here you can reach https://localhost:8080, navigate to myrealm -> user profile attributes, create your attributes.

Save, navigate to https://my-theme.keycloakify.dev see if it's broken or not.

If it's broken please provide some screenshot, reproduction steps, and expected behavior. I'll adress it.

If it works as expected it means that the issue is at the angular integration level.

Best,

[luca-peruzzo]

{
  "attributes": [
    {
      "name": "username",
      "displayName": "${username}",
      "validations": {
        "length": {
          "min": 3,
          "max": 255
        },
        "username-prohibited-characters": {},
        "up-username-not-idn-homograph": {}
      },
      "permissions": {
        "view": [
          "admin",
          "user"
        ],
        "edit": [
          "admin",
          "user"
        ]
      },
      "multivalued": false
    },
    {
      "name": "favourite-pet",
      "displayName": "${profile.attributes.favourite-pet}",
      "validations": {
        "options": {
          "options": [
            "dog",
            "cat",
            "fish"
          ]
        }
      },
      "annotations": {
        "inputType": "multiselect"
      },
      "required": {
        "roles": [
          "user"
        ]
      },
      "permissions": {
        "view": [
          "admin",
          "user"
        ],
        "edit": [
          "admin",
          "user"
        ]
      },
      "multivalued": true
    },
    {
      "name": "email",
      "displayName": "${email}",
      "validations": {
        "email": {},
        "length": {
          "max": 255
        }
      },
      "required": {
        "roles": [
          "user"
        ]
      },
      "permissions": {
        "view": [
          "admin",
          "user"
        ],
        "edit": [
          "admin",
          "user"
        ]
      },
      "multivalued": false
    },
    {
      "name": "firstName",
      "displayName": "${firstName}",
      "validations": {
        "length": {
          "max": 255
        },
        "person-name-prohibited-characters": {}
      },
      "required": {
        "roles": [
          "user"
        ]
      },
      "permissions": {
        "view": [
          "admin",
          "user"
        ],
        "edit": [
          "admin",
          "user"
        ]
      },
      "multivalued": false
    },
    {
      "name": "lastName",
      "displayName": "${lastName}",
      "validations": {
        "length": {
          "max": 255
        },
        "person-name-prohibited-characters": {}
      },
      "required": {
        "roles": [
          "user"
        ]
      },
      "permissions": {
        "view": [
          "admin",
          "user"
        ],
        "edit": [
          "admin",
          "user"
        ]
      },
      "multivalued": false
    }
  ],
  "groups": [
    {
      "name": "user-metadata",
      "displayHeader": "User metadata",
      "displayDescription": "Attributes, which refer to user metadata"
    }
  ]
}

[luca-peruzzo]

@garronej as you can see the button is enabled even if there aren't favourite pets selected and there is no error message. (also it is impossible to select any pet but I think this is another problem).

[garronej]

Hello @luca-peruzzo,

What's the context of thoses screenshot?
Is this keycloakify-starter (react) with npx keycloakify start-keycloak?

[luca-peruzzo]

Hello @luca-peruzzo,

What's the context of thoses screenshot? Is this keycloakify-starter (react) with npx keycloakify start-keycloak?

yes it is, as requested. keycloak version: 26

[garronej]

Well, yes, there are a few bugs with these validators:

As you can see, the button is enabled even if there aren’t any favorite pets selected.

Yes, this is indeed a bug—not a terrible one, since they'd get the error immediately after pressing the submit button:

But they also have to re-type the password, which is annoying. Worth fixing thank you.

And there is no error message.

There is an error message, but it's only shown after the input loses focus. This is a default that I should change (by setting this to true).

There is also a {}, and I’ll have to see if this message comes from my translations or elsewhere.

(Also, it is impossible to select any pet, but I think this is another problem).

It’s possible; it’s just that the input is cumbersome—you have to hold down Ctrl on the keyboard.

All in all, yes, there are a few issues with the validation of this input type. However, the input itself is unusable in the default Keycloak theme. I consider it a broken feature in Keycloak (it’s unusable in the default theme).

Simply enabling multi-valued input is also broken, both in the base theme and in Keycloakify. We should see an "add value" option below, but we don’t.

If you want to issue a PR on Keycloakify to address some of these