bug: max-length property not being set in input component

[leblanccr]

Prerequisites | Prérequis

• I have read the Contributing Guidelines. | J’ai lu les Lignes directrices sur les contributions.
• I agree to follow the Code of Conduct. | J’accepte de me conformer au Code de conduite.
• I have searched for existing issues that already report this problem, without success. | J’ai vérifié parmi les tickets (issues) existants que ce sujet n’avait pas déjà été soumis.

GC Design System Components Package and Version | Paquet et version des composants de Système de design GC

gcds-components-vue 0.26.2

Current Behavior | Comportement observé

The size property in the gcds-input component only sets the width of the input field and not a character limit.

Expected Behavior | Comportement attendu

The size property in the gcds-input component should set a character limit for the input field.

System Info | Information sur le système

Tested using Nuxt.js 3.13.2, Edge, and Windows 11.

Steps to Reproduce | Étapes pour reproduire le bogue

1. Set the size property in a gcds-input component to an arbitrary number (n).
2. Test the max-length property by entering a number of characters greater than n.

Code Reproduction URL | URL de reproduction du code

No response

Additional Information | Informations supplémentaires

No response

[daine]

@leblanccr thanks for your feedback! The size property for the gcds-input component does not set the max-length for the input field. This is done for accessibility and usability reasons. We are in the process of updating our documentation in github to reflect this. This is the new description for the property

Size attribute for an input element to provide a visual indication of the expected text length to the user

You can create a validator for the component where you can specify a max-length, for example. Let us know if you want more information on that.

[leblanccr]

Hi Daine, Thanks for the info. If you don’t mind, could you elaborate on creating a custom validator? I’d really like to know more about that. Thanks, Craig From: Daine Trinidad ***@***.***> Sent: Thursday, January 9, 2025 3:48 AM To: cds-snc/gcds-components ***@***.***> Cc: LeBlanc, Craig (DFO/MPO) ***@***.***>; Mention ***@***.***> Subject: Re: [cds-snc/gcds-components] bug: max-length property not being set in input component (Issue #727) You don't often get email from ***@***.******@***.***>. Learn why this is important<https://aka.ms/LearnAboutSenderIdentification> @leblanccr<https://github.com/leblanccr> thanks for your feedback! The size property for the gcds-input component does not set the max-length for the input field. This is done for accessibility and usability reasons. We are in the process of updating our documentation in github to reflect this. This is the new description for the property Size attribute for an input element to provide a visual indication of the expected text length to the user You can create a validator for the component where you can specify a max-length, for example. Let us know if you want more information on that. — Reply to this email directly, view it on GitHub<#727 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/BHR4XXMCRXSL32ARVYNGPXD2JYSUNAVCNFSM6AAAAABU2UMBY2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKNZZGM3DMMJQHE>. You are receiving this because you were mentioned.Message ID: ***@***.******@***.***>>

[daine]

@leblanccr
We're still trying to document our validators, but here's how you can do it for now.
To write a custom validator for the gcds-input and other form elements (excluding gcds-date-input), you are able to follow the following example.

<gcds-input
        input-id="form-name"
        label="Validation test"
        name="validator-test"
        hint="Must be between 3 and 10 characters."
        id="text-input"
        size="10"
        required
      ></gcds-input>

      <script>
        // Custom validator to allow validation min length, max length or value between min and max
        function getLengthValidator(min, max) {
          // Create errorMessage object
          let errorMessage = {};
          if (min && max) {
            errorMessage["en"] = `You must enter between ${min} and ${max} characters`;
            errorMessage["fr"] = `French You must enter between ${min} and ${max} characters`;
          } else if (min) {
            errorMessage["en"] = `You must enter at least ${min} characters`;
            errorMessage["fr"] = `French You must enter at least ${min} characters`;
          } else if (max) {
            errorMessage["en"] = `You must enter less than ${max} characters`;
            errorMessage["fr"] = `French You must enter less than ${max} characters`;
          }
          return {
            validate: (value) => {
              value = value || '';
              if (min && max) {
                return min <= value.length && value.length <= max;
              }
              if (min) {
                return min <= value.length;
              }
              if (max) {
                return value.length <= max;
              }
              return true;
            },
            errorMessage
          };
        }

        // Get the text input
        const textInput = document.getElementById('text-input');

        // Assign the validator
        textInput.validator = [ getLengthValidator(null, 10) ];
        </script>

This custom validator allows you to set a min and max length for the entered value and have a specific error message depending on what you have passed.

If using a framework like React/Vue, you can also assign the validators to the components with a property like validator={[getLengthValidator(null, 10)]}.

The date input is formatted a little differently since it is a component that has three fields built into it. If you want a code example for the date input component, let us know!