Skip to content

Fixing incorrect id issue with checkbox #1321

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

Merged
merged 3 commits into from
Jul 16, 2024
Merged

Fixing incorrect id issue with checkbox #1321

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6b043b8
Fixing incorrect id issue with checkbox
rismehta Jul 16, 2024
a061f4d
updating component readme
rismehta Jul 16, 2024
fb737c2
updating read me
rismehta Jul 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions ...src/main/content/jcr_root/apps/core/fd/components/form/checkbox/v1/checkbox/checkbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,15 +30,15 @@
data-cmp-enabled="${checkbox.enabled ? 'true' : 'false'}"
data-cmp-required="${checkbox.required ? 'true': 'false'}"
data-cmp-data-layer="${checkbox.data.json}"
data-sly-test.widgetId="${'{0}-{1}' @ format=[component.id, '_widget']}"
data-sly-test.widgetId="${'{0}-{1}' @ format=[checkbox.id, 'widget']}"
data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}">
<div class="cmp-adaptiveform-checkbox__help-container">
<div data-sly-call="${questionMark.questionMark @componentId=checkbox.id, longDescription=checkbox.description, bemBlock='cmp-adaptiveform-checkbox'}" data-sly-unwrap></div>
</div>

<div class="cmp-adaptiveform-checkbox__widget-container">
<input class="cmp-adaptiveform-checkbox__widget" type="checkbox"
id="${checkbox.id}_widget"
id="${checkbox.id}-widget"
title="${checkbox.tooltipVisible ? '' : checkbox.tooltipText}"
name="${checkbox.name}"
value="${checkbox.default[0]}"
Expand Down
10 changes: 10 additions & 0 deletions .../content/jcr_root/apps/core/fd/components/form/textinput/v1/textinput/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,16 @@ The following properties are written to JCR for this Form Text component and are
8. `./readOnly` - if set to `true`, the filed will be read only
9. `./maxLength` - defines the maximum length of input allowed for the field.
10. `./minLength` - defines the minimum length of input allowed for the field.
11. `./maxLengthMessage` - defines the maximum length error message for the field.
12. `./minLengthMessage` - defines the minimum length error message for the field.


### Behavior of `maxLength` and `maxLengthMessage`

The `maxLength` property in HTML5 compliant fields, such as those used in the Adaptive Form Text Input component, restricts users from typing more characters than specified. This restriction aligns with HTML5 standards to ensure the input length does not exceed the defined maximum. However, there are scenarios, particularly in custom widgets or headless implementations, where it might be necessary to allow input beyond the `maxLength`.

To accommodate such use-cases, while still adhering to HTML5 compliance within the core component, the `maxLengthMessage` property is provided. This property allows developers to define a custom error message that is displayed when the input exceeds the `maxLength`, offering a way to guide users even when custom logic permits them to enter more characters than the standard limit.


## Client Libraries
The component provides a `core.forms.components.textinput.v1.runtime` client library category that contains the Javascript runtime for the component.
Expand Down