-
Notifications
You must be signed in to change notification settings - Fork 62
FIX CHECKBOX_GROUP #182
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.
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
FIX CHECKBOX_GROUP #182
Changes from all commits
a15bf06
f40baa8
019c203
80c0780
c9f9c38
1744c8a
2e2020d
c0b7164
76abb0e
477e5e2
f778d6c
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,21 @@ | ||
| import { Controller } from "@hotwired/stimulus" | ||
| import { Controller } from "@hotwired/stimulus"; | ||
|
|
||
| export default class extends Controller { | ||
| static targets = ["checkbox"]; | ||
|
|
||
| connect() { | ||
| if (this.element.hasAttribute("data-required")) { | ||
| this.checkboxTargets.forEach(checkbox => { | ||
| checkbox.required = true; | ||
| }); | ||
| } | ||
| this.#handleRequired(); | ||
| } | ||
|
|
||
| onChange(event) { | ||
| if (this.element.hasAttribute("data-required")) { | ||
| const checked = this.checkboxTargets.some(checkbox => checkbox.checked); | ||
| onChange() { | ||
| this.#handleRequired(); | ||
| } | ||
|
|
||
| #handleRequired() { | ||
|
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. it's necessary to run the same code in |
||
| if (!this.element.hasAttribute("data-required")) return; | ||
|
|
||
| const checked = this.checkboxTargets.some(({ checked }) => checked); | ||
|
|
||
| this.checkboxTargets.forEach(checkbox => { | ||
| checkbox.required = !checked; | ||
| }); | ||
| } | ||
| this.checkboxTargets.forEach((checkbox) => (checkbox.required = !checked)); | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,8 @@ | ||
| import { Controller } from "@hotwired/stimulus" | ||
| import { Controller } from "@hotwired/stimulus"; | ||
|
|
||
| export default class extends Controller { | ||
| static targets = ["input", "error"]; | ||
| static values = { shouldValidate: false } | ||
|
|
||
| static values = { shouldValidate: false }; | ||
|
|
||
| connect() { | ||
| if (this.errorTarget.textContent) { | ||
|
|
@@ -41,45 +40,20 @@ export default class extends Controller { | |
| } | ||
|
|
||
| #getValidationMessage() { | ||
| const input = this.inputTarget; | ||
| const defaultMessage = this.inputTarget.validationMessage; | ||
| let errorMessage; | ||
|
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. more understandable code here |
||
|
|
||
| if (input.validity.valueMissing) { | ||
| return input.dataset.valueMissing || defaultMessage; | ||
| } | ||
| const { validity, dataset, validationMessage } = this.inputTarget; | ||
|
|
||
| if (input.validity.badInput) { | ||
| return input.dataset.badInput || defaultMessage; | ||
| } | ||
|
|
||
| if (input.validity.patternMismatch) { | ||
| return input.dataset.patternMismatch || defaultMessage; | ||
| } | ||
|
|
||
| if (input.validity.rangeOverflow) { | ||
| return input.dataset.rangeOverflow || defaultMessage; | ||
| } | ||
|
|
||
| if (input.validity.rangeUnderflow) { | ||
| return input.dataset.rangeUnderflow || defaultMessage; | ||
| } | ||
|
|
||
| if (input.validity.stepMismatch) { | ||
| return input.dataset.stepMismatch || defaultMessage; | ||
| } | ||
|
|
||
| if (input.validity.tooLong) { | ||
| return input.dataset.tooLong || defaultMessage; | ||
| } | ||
|
|
||
| if (input.validity.tooShort) { | ||
| return input.dataset.tooShort || defaultMessage; | ||
| } | ||
|
|
||
| if (input.validity.typeMismatch) { | ||
| return input.dataset.typeMismatch || defaultMessage; | ||
| } | ||
| if (validity.tooLong) errorMessage = dataset.tooLong; | ||
| if (validity.tooShort) errorMessage = dataset.tooShort; | ||
| if (validity.badInput) errorMessage = dataset.badInput; | ||
| if (validity.typeMismatch) errorMessage = dataset.typeMismatch; | ||
| if (validity.stepMismatch) errorMessage = dataset.stepMismatch; | ||
| if (validity.valueMissing) errorMessage = dataset.valueMissing; | ||
| if (validity.rangeOverflow) errorMessage = dataset.rangeOverflow; | ||
| if (validity.rangeUnderflow) errorMessage = dataset.rangeUnderflow; | ||
| if (validity.patternMismatch) errorMessage = dataset.patternMismatch; | ||
|
|
||
| return defaultMessage; | ||
| return errorMessage || validationMessage; | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -13,7 +13,7 @@ def default_attrs | |
| type: "radio", | ||
| data: { | ||
| rbui__form_field_target: "input", | ||
| action: "input->rbui--form-field#onInput invalid->rbui--form-field#onInvalid" | ||
| action: "change->rbui--form-field#onInput invalid->rbui--form-field#onInvalid" | ||
|
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. same situation... |
||
| }, | ||
| class: "h-4 w-4 p-0 border-primary rounded-full flex-none" | ||
| } | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the correct use of actions here is
change, notinputchange->rbui--checkbox-group#onChangeneeds to run before the validation ofchange->rbui--form-field#onInputandinvalid->rbui--form-field#onInvalid