Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

validation-related props not preventing form submission #8647

Closed
2 of 6 tasks
jcfranco opened this issue Jan 25, 2024 · 3 comments
Closed
2 of 6 tasks

validation-related props not preventing form submission #8647

jcfranco opened this issue Jan 25, 2024 · 3 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. Calcite (dev) Issues logged by Calcite developers. calcite-components Issues specific to the @esri/calcite-components package. estimate - 3 A day or two of work, likely requires updates to tests. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality
Milestone
2024-02-15 - Feb ...

Comments

@jcfranco
Copy link
Member

jcfranco commented Jan 25, 2024 •
edited
Loading

Check existing issues

Actual Behavior

pattern, minLength and other related props should prevent form submission.

Expected Behavior

Form submit is prevented when the component is in an invalid state.

Reproduction Sample

https://codepen.io/jcfranco/pen/wvOPvEa

Reproduction Steps

  1. Type in "http://a"
  2. Press the submit button

Note that the alert message is displayed due to the submit event not being blocked.

Reproduction Version

2.3.0

Relevant Info

The internal hidden input isn't getting all of the validation-related props set on it on initialization and some are missing (see https://github.com/Esri/calcite-design-system/blob/main/packages/calcite-components/src/components/input/input.tsx#L886-L903).

Regression?

No response

Priority impact

p1 - need for current milestone

Impact

This impacts all form-related use cases that involve validation.

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-angular
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/eslint-plugin-calcite-components

Esri team

Calcite (dev)
@jcfranco jcfranco added bug Bug reports for broken functionality. Issues should include a reproduction of the bug. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Jan 25, 2024
@github-actions github-actions bot added impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone calcite-components Issues specific to the @esri/calcite-components package. Calcite (dev) Issues logged by Calcite developers. labels Jan 25, 2024
@jcfranco jcfranco added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. labels Jan 26, 2024
@jcfranco jcfranco self-assigned this Jan 26, 2024
@jcfranco jcfranco added needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. estimate - 3 A day or two of work, likely requires updates to tests. p - high Issue should be addressed in the current milestone, impacts component or core functionality and removed needs triage Planning workflow - pending design/dev review. labels Jan 26, 2024
@jcfranco
Copy link
Member Author

Note: minlength and maxlength won't trigger constraint validation unless a user interacts with the input (see minlength spec and maxlength spec). This will have to be a known limitation until #8126 is completed.

@jcfranco jcfranco removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Jan 26, 2024
@jcfranco jcfranco mentioned this issue Jan 26, 2024
Merged
jcfranco added a commit that referenced this issue Feb 10, 2024
@jcfranco
fix(input, input-number, input-text, text-area): ensure all applicabl…
6de8534 
…e props are considered in form validation (#8655)

**Related Issue:** #8647 

## Summary

This ensures `pattern`, `minlength`, `maxlength`, `min`, `max`, `step`
are set on the internal form input based on the matching type.

**Note**: `minlength` and `maxlength` won't trigger constraint
validation unless a user interacts with the input (see [`minlength`
spec](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#setting-minimum-input-length-requirements:-the-minlength-attribute:~:text=Constraint%20validation%3A%20If%20an%20element%20has%20a%20minimum,element%20is%20suffering%20from%20being%20too%20short.)
and [`maxlength`
spec](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#setting-minimum-input-length-requirements:-the-minlength-attribute:~:text=Constraint%20validation%3A%20If%20an%20element%20has%20a%20maximum,element%20is%20suffering%20from%20being%20too%20long.)).
This will have to be a known limitation until #8126 is completed.
@jcfranco jcfranco added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Feb 10, 2024
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned jcfranco Feb 10, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Feb 13, 2024
@geospatialem
Copy link
Member

Verified in 2.5.0-next.2:

image

Elijbet pushed a commit that referenced this issue Feb 15, 2024
@jcfranco @Elijbet
fix(input, input-number, input-text, text-area): ensure all applicabl…
f0f59a2 
…e props are considered in form validation (#8655)

**Related Issue:** #8647 

## Summary

This ensures `pattern`, `minlength`, `maxlength`, `min`, `max`, `step`
are set on the internal form input based on the matching type.

**Note**: `minlength` and `maxlength` won't trigger constraint
validation unless a user interacts with the input (see [`minlength`
spec](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#setting-minimum-input-length-requirements:-the-minlength-attribute:~:text=Constraint%20validation%3A%20If%20an%20element%20has%20a%20minimum,element%20is%20suffering%20from%20being%20too%20short.)
and [`maxlength`
spec](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#setting-minimum-input-length-requirements:-the-minlength-attribute:~:text=Constraint%20validation%3A%20If%20an%20element%20has%20a%20maximum,element%20is%20suffering%20from%20being%20too%20long.)).
This will have to be a known limitation until #8126 is completed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. Calcite (dev) Issues logged by Calcite developers. calcite-components Issues specific to the @esri/calcite-components package. estimate - 3 A day or two of work, likely requires updates to tests. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality
Projects
None yet
Milestone
2024-02-15 - Feb Maintenance Release
Development

No branches or pull requests
3 participants
@jcfranco @geospatialem @DitwanP