Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 1 addition & 1 deletion lib/rbui/checkbox/checkbox.rb
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ def default_attrs
data: {
rbui__form_field_target: "input",
rbui__checkbox_group_target: "checkbox",
action: "input->rbui--form-field#onInput invalid->rbui--form-field#onInvalid change->rbui--checkbox-group#onChange"
action: "change->rbui--checkbox-group#onChange change->rbui--form-field#onInput invalid->rbui--form-field#onInvalid"
Copy link
Contributor Author

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, not input

change->rbui--checkbox-group#onChange needs to run before the validation of change->rbui--form-field#onInput and invalid->rbui--form-field#onInvalid

},
class: "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 accent-primary"
}
Expand Down
24 changes: 11 additions & 13 deletions lib/rbui/checkbox/checkbox_group_controller.js
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() {
Copy link
Contributor Author

@pierry01 pierry01 Nov 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's necessary to run the same code in connect and onChange

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));
}
}
54 changes: 14 additions & 40 deletions lib/rbui/form/form_field_controller.js
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) {
Expand Down Expand Up @@ -41,45 +40,20 @@ export default class extends Controller {
}

#getValidationMessage() {
const input = this.inputTarget;
const defaultMessage = this.inputTarget.validationMessage;
let errorMessage;
Copy link
Contributor Author

Choose a reason for hiding this comment

The 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;
}
}
2 changes: 1 addition & 1 deletion lib/rbui/radio_button/radio_button.rb
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same situation... change instead of input for radio

},
class: "h-4 w-4 p-0 border-primary rounded-full flex-none"
}
Expand Down