FIX CHECKBOX_GROUP (#182)

* BETTER CODE * BETTER CODE * 1st OK * 1st OK * BETTER CODE * BETTER CODE * UNDO * 1st OK * OOPS * this.inputTarget. * input -> change
ruby-ui · Nov 5, 2024 · 518c9de · 518c9de
1 parent 5231812
commit 518c9de
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 55 deletions.
diff --git a/lib/rbui/checkbox/checkbox.rb b/lib/rbui/checkbox/checkbox.rb
@@ -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"
         },
         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"
       }

diff --git a/lib/rbui/checkbox/checkbox_group_controller.js b/lib/rbui/checkbox/checkbox_group_controller.js
@@ -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() {
+    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));
   }
 }
diff --git a/lib/rbui/form/form_field_controller.js b/lib/rbui/form/form_field_controller.js
@@ -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;
 
-    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;
   }
 }
diff --git a/lib/rbui/radio_button/radio_button.rb b/lib/rbui/radio_button/radio_button.rb
@@ -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"
         },
         class: "h-4 w-4 p-0 border-primary rounded-full flex-none"
       }