fix: check if element exists #278

development/templates/vite.config.mjs

@@ -93,8 +93,9 @@ export default defineConfig({
         https: {
             key: "${LOCALHOST_CERTS_DIR}/localhost.alvine.dev.key",
             cert: "${LOCALHOST_CERTS_DIR}/localhost.alvine.dev.crt"
-            
-
+        },
+        watch: {
+            ignored: ['**/node_modules/**']
         },
         debug: true,
         proxy: {

source/components/datatable/datatable.mjs

@@ -881,43 +881,51 @@ function initEventHandler() {
             "data-monster-role",
             "select-row",
         );
-        if (element) {
-            const key = element.parentNode.getAttribute(
-                "data-monster-insert-reference",
-            );
-            const row = self.getGridElements(
-                `[data-monster-insert-reference="${key}"]`,
-            );
-
-            const index = key.split("-").pop();
-
-            if (element.checked) {
-                row.forEach((col) => {
-                    col.classList.add("selected");
-                });
-
-                fireCustomEvent(self, "monster-datatable-row-selected", {
-                    index: index,
-                });
-            } else {
-                row.forEach((col) => {
-                    col.classList.remove("selected");
-                });
 
-                fireCustomEvent(self, "monster-datatable-row-deselected", {
-                    index: index,
-                });
-            }
+        if (!element) {
+            return;
+        }
+        
+        const key = element.parentNode.getAttribute(
+            "data-monster-insert-reference",
+        );
+        const row = self.getGridElements(
+            `[data-monster-insert-reference="${key}"]`,
+        );
 
-            fireCustomEvent(this, "monster-datatable-selection-changed", {});
+        const index = key.split("-").pop();
+
+        if (element.checked) {
+            row.forEach((col) => {
+                col.classList.add("selected");
+            });
+
+            fireCustomEvent(self, "monster-datatable-row-selected", {
+                index: index,
+            });
+        } else {
+            row.forEach((col) => {
+                col.classList.remove("selected");
+            });
+
+            fireCustomEvent(self, "monster-datatable-row-deselected", {
+                index: index,
+            });
         }
 
+        fireCustomEvent(this, "monster-datatable-selection-changed", {});
+
         const rows = self.getGridElements(`[data-monster-role="select-row"]`);
         const allSelected = Array.from(rows).every((row) => row.checked);
+
         const selectAll = this[gridHeadersElementSymbol].querySelector(
             `[data-monster-role="select-all"]`,
         );
-        selectAll.checked = allSelected;
+
+        if (selectAll) {
+            selectAll.checked = allSelected;
+        }
+
     };
 
     this[gridElementSymbol].addEventListener("click", selectRowCallback);