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

Display a custom UI for validation messages instead of the native popover #8000

Closed
2 of 4 tasks
benelan opened this issue Oct 12, 2023 · 2 comments
Closed
2 of 4 tasks

Display a custom UI for validation messages instead of the native popover #8000

benelan opened this issue Oct 12, 2023 · 2 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. Calcite (dev) Issues logged by Calcite developers. calcite-components Issues specific to the @esri/calcite-components package. enhancement Issues tied to a new feature or request. estimate - 8 Requires input from team, consider smaller steps.
Milestone
2024-01-17 - Jan ...

Comments

@benelan
Copy link
Member

benelan commented Oct 12, 2023 •
edited
Loading

Check existing issues

Description

Our form components currently display the native validation popover when a form is submitted with invalid values. The native validation popover is styled differently depending on the browser. The plan is to replace the native validation popover with a builtin message.

This is required before some other validation issues can be completed. Otherwise there will be two different UIs for validation messages. Some of the validation issues blocked by this one are:

Acceptance Criteria

The form util needs to be modified to prevent the native validation popover from displaying, and to display a custom one instead. Eventually we need to add a way to display validation messages to all form components (maybe via a prop). I think design is TBD on that. In the meantime, we can try to use a sibling calcite-input-message.

Edit: Design said we need to add the calcite-input-message to the form components as part of this issue due to spacing weirdness when displaying the message as a sibling component. See the prototypes below

Prototypes

Current behavior using the native UI:
https://codepen.io/benesri/pen/ExGpjaL

Sibling calcite-input-message created after form submission when there are invalid values (a lot of layout shifting):
https://codepen.io/benesri/pen/YzBzVKE

Sibling calcite-input-message created on initial render (extra padding initially, plus a bit of layout shifting after submitting):
https://codepen.io/benesri/pen/PoVojVb

calcite-popover (will not be used in implementation):
https://codepen.io/benesri/pen/VwgwzPj?editors=1010

Which Component

Changes to form.ts will be required. Adding Input Message to the components will be addressed by #8057

Example Use Case

Forms

Priority impact

p3 - want for upcoming milestone

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-react
  • @esri/eslint-plugin-calcite-components

Esri team

Calcite (dev)
@benelan benelan added enhancement Issues tied to a new feature or request. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Oct 12, 2023
@github-actions github-actions bot added Calcite (dev) Issues logged by Calcite developers. calcite-components Issues specific to the @esri/calcite-components package. p3 - want for upcoming milestone labels Oct 12, 2023
@benelan benelan mentioned this issue Oct 12, 2023
Open
@benelan benelan mentioned this issue Oct 25, 2023
Closed
21 tasks
@geospatialem geospatialem mentioned this issue Oct 27, 2023
Closed
@geospatialem geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Oct 27, 2023
@geospatialem geospatialem added this to the 2023 November Priorities milestone Oct 27, 2023
@benelan benelan mentioned this issue Nov 30, 2023
Merged
@benelan benelan added 2 - in development Issues that are actively being worked on. estimate - 8 Requires input from team, consider smaller steps. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Nov 30, 2023
benelan added a commit that referenced this issue Dec 19, 2023
@benelan
feat: add validation-message and validation-icon attributes to fo…
a554cfd 
…rm components for new internal `calcite-input-message` (#8305)

**Related Issue:** #8057

## Summary

Add an internal `calcite-input-message` to the following components 
- combobox
- input-date-picker
- input-number
- input-text
- input-time-picker
- input-time-zone
- input
- select
- text-area

The new properties will be used to replace the browser's popover element
that displays validation messages on form submission (#8000).
This was referenced Dec 28, 2023
Closed
Closed
Closed
Closed
@benelan benelan mentioned this issue Jan 9, 2024
Merged
benelan added a commit that referenced this issue Jan 17, 2024
@benelan
feat: use input-message to display validation messages for invalid fi…
fd392fe 
…elds after form submission (#8574)

**Related Issue:** #8000

## Summary

- Replaces the native popover displayed on form elements with invalid
values after form submission.
- The `calcite-input-message` used to display the validation message is
cleared once the component's Change event fires (or Input event for
`calcite-input`, `calcite-input-number`, `calcite-input-text`, and
`calcite-text-area`).
- Non-calcite form elements will still display the native popover to
prevent a breaking change. It is up to the developer replace the native
popover with a `calcite-input-message` to prevent UI inconsistencies.
- This change may cause layout shifting after form submission due to
adding a `calcite-input-message` under calcite form elements with
invalid values.
@benelan benelan removed the 2 - in development Issues that are actively being worked on. label Jan 17, 2024
@benelan benelan added the 3 - installed Issues that have been merged to master branch and are ready for final confirmation. label Jan 17, 2024
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned benelan Jan 17, 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 Jan 17, 2024
@geospatialem
Copy link
Member

Verified for the following components with the required attribute in 2.2.0-next.22 via https://codepen.io/geospatialem/pen/abMJqxP:

  • input-text
  • input
  • input-date-picker
  • input-number
  • text-area

image

@benelan benelan mentioned this issue Feb 3, 2024
Merged
benelan added a commit that referenced this issue Feb 7, 2024
@benelan
fix: don't override existing validationMessage when displaying after …
3076220 
…form submission (#8690)

**Related Issue:** #8000 

## Summary

- Only set `validationMessage` property during form submission if it
doesn't have an existing value. This allows users to set a custom
validation message, which will be displayed instead of the default
message provided by the browser.

- Move the form validation e2e tests to the formAssociated common test,
which was [requested as a follow up
item](#8574 (comment)).
Elijbet pushed a commit that referenced this issue Feb 15, 2024
@benelan @Elijbet
fix: don't override existing validationMessage when displaying after …
6131f5f 
…form submission (#8690)

**Related Issue:** #8000 

## Summary

- Only set `validationMessage` property during form submission if it
doesn't have an existing value. This allows users to set a custom
validation message, which will be displayed instead of the default
message provided by the browser.

- Move the form validation e2e tests to the formAssociated common test,
which was [requested as a follow up
item](#8574 (comment)).
@geospatialem geospatialem mentioned this issue Aug 8, 2024
Closed
6 tasks
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. Calcite (dev) Issues logged by Calcite developers. calcite-components Issues specific to the @esri/calcite-components package. enhancement Issues tied to a new feature or request. estimate - 8 Requires input from team, consider smaller steps.
Projects
None yet
Milestone
2024-01-17 - Jan Main Release
Development

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