bug: Required Text Input does not prevent a form from being submitted

[grathomp]

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-react": "^0.25.1

Current Behavior | Comportement observé

In version 0.15.0, when an required Input Box was in a (non-gcds) form, it would prevent submission when empty. Now it lets the form be submitted, and after submission all the 'Enter Information to continue.' errors show up.

Expected Behavior | Comportement attendu

Expected behaviour is when its a required Input Box is in a form trying to be submitted, it would prevent submission when empty.

System Info | Information sur le système

Microsoft Edge Browser, Using a react framework and version 0.25.1

Steps to Reproduce | Étapes pour reproduire le bogue

Creating a required Input box within a form

Code Reproduction URL | URL de reproduction du code

https://codesandbox.io/p/sandbox/bug-report-4d3jl9

Additional Information | Informations supplémentaires

No response

[daine]

@grathomp Thanks for the report!

[daine]

@grathomp the sandbox link is broken, could you verify it's correct? TIA!

[grathomp]

Try again now - I've updated permissions

[ethanWallace]

Hey @grathomp, since the v0.15.0 we have made some big updates to our form components. Specifically in our v0.21.0 release we transitioned to use shadow-dom and form-associated components for our form components. This change made it so we would no longer use the browser validation and rely mainly on the built in validation for each form component. The submit event on the form may fire but it does not complete as it is prevented by the form component with the error message.

If you'd like to have additional logic (validation or other use cases), here's an example of how you should be able to wait for the required form elements to be validated first, and adding your logic/code on top of that before it gets submitted to the server.

  const handleSubmit = (event: any) => {
    // Timeout for 50ms to allow components to validate
    setTimeout(() => {
      // If the nativeEvent "submit" has not been prevented
      if(!event.nativeEvent.defaultPrevented) {
        setSubmitted("true");
      }
    }, 50);
  };