refactor: group listeners

GPP-Woo · Oct 23, 2024 · 37532a8 · 37532a8
1 parent 0735be1
commit 37532a8
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 36 deletions.
diff --git a/odpc.client/src/components/checkbox-group/CheckboxGroup.vue b/odpc.client/src/components/checkbox-group/CheckboxGroup.vue
@@ -16,6 +16,7 @@
           @click="toggleAll"
           :checked="allSelected"
           :aria-describedby="`description-${instanceId}`"
+          :aria-invalid="!model.length ? true : undefined"
         />
         selecteer alles
       </label>
@@ -28,6 +29,7 @@
           :value="uuid"
           v-model="model"
           :aria-describedby="`description-${instanceId}`"
+          :aria-invalid="!model.length ? true : undefined"
         />{{ naam }}</label
       >
     </div>

diff --git a/odpc.client/src/components/checkbox-group/use-checkbox-group.ts b/odpc.client/src/components/checkbox-group/use-checkbox-group.ts
@@ -1,56 +1,43 @@
-import { ref, onUnmounted, watchEffect } from "vue";
+import { ref, watchEffect, onUnmounted } from "vue";
 
 export const useCheckboxGroup = () => {
   const groupRef = ref<HTMLElement>();
 
   const isAnyChecked = (checkboxes: NodeListOf<HTMLInputElement>) =>
     Array.from(checkboxes).some((checkbox) => checkbox.checked);
 
-  const onCheckboxChange = (checkboxes: NodeListOf<HTMLInputElement>) =>
-    !isAnyChecked(checkboxes)
-      ? setCustomValidityCheckboxGroup(checkboxes)
-      : clearCustomValidityCheckboxGroup(checkboxes);
+  const setCustomValidityCheckboxGroup = () => {
+    const checkboxes = (groupRef.value?.querySelectorAll("[type='checkbox']") ||
+      []) as NodeListOf<HTMLInputElement>;
 
-  const setCustomValidityCheckboxGroup = (checkboxes: NodeListOf<HTMLInputElement>) =>
-    checkboxes.forEach((checkbox) => checkbox.setCustomValidity("Kies minimaal één optie."));
-
-  const clearCustomValidityCheckboxGroup = (checkboxes: NodeListOf<HTMLInputElement>) =>
-    checkboxes.forEach((checkbox) => checkbox.setCustomValidity(""));
-
-  const checkboxListeners: (() => void)[] = [];
-
-  const removeCheckboxListeners = () => checkboxListeners.forEach((remove) => remove());
+    checkboxes.forEach((checkbox) =>
+      checkbox.setCustomValidity(!isAnyChecked(checkboxes) ? "Kies minimaal één optie." : "")
+    );
+  };
 
-  const addCheckboxListeners = () => {
-    removeCheckboxListeners();
+  const invalidHandler = () =>
+    groupRef.value instanceof HTMLDetailsElement && (groupRef.value.open = true);
 
+  const addListeners = () => {
     if (!groupRef.value || !groupRef.value.hasAttribute("aria-required")) return;
 
-    const checkboxes = groupRef.value.querySelectorAll(
-      "[type='checkbox']"
-    ) as NodeListOf<HTMLInputElement>;
-
-    if (!checkboxes?.length) return;
+    setCustomValidityCheckboxGroup();
 
-    if (!isAnyChecked(checkboxes)) setCustomValidityCheckboxGroup(checkboxes);
-
-    const invalidHandler = () =>
-      groupRef.value instanceof HTMLDetailsElement && (groupRef.value.open = true);
-
-    const changeHandler = () => onCheckboxChange(checkboxes);
-
-    checkboxes.forEach((checkbox) => {
-      checkbox.addEventListener("invalid", invalidHandler);
-      checkboxListeners.push(() => checkbox.removeEventListener("invalid", invalidHandler));
+    groupRef.value.addEventListener("change", setCustomValidityCheckboxGroup);
+    groupRef.value.addEventListener("invalid", invalidHandler, true);
+  };
 
-      checkbox.addEventListener("change", changeHandler);
-      checkboxListeners.push(() => checkbox.removeEventListener("change", changeHandler));
-    });
+  const removeListeners = () => {
+    groupRef.value?.removeEventListener("change", setCustomValidityCheckboxGroup);
+    groupRef.value?.removeEventListener("invalid", invalidHandler, true);
   };
 
-  watchEffect(() => groupRef.value && addCheckboxListeners());
+  watchEffect(() => {
+    removeListeners();
+    addListeners();
+  });
 
-  onUnmounted(() => removeCheckboxListeners());
+  onUnmounted(() => removeListeners());
 
   return {
     groupRef