merch sizing-guide: clear table on click outside

styleguide/merch.html

@@ -1146,7 +1146,6 @@
         const dimension = cell.dataset.dim;
 
         document.querySelectorAll('td.val:not(.empty)').forEach(match => {
-            match.style.backgroundColor = ``
             match.dataset.diff = '';
             match.classList.remove('highlighted')
             match.classList.remove('currentDimension')
@@ -1170,6 +1169,7 @@
     }
 
     function selectCellPlus(e) {
+        e.stopPropagation();
         const cell = e.target;
         const group = cell.parentElement.parentElement;
         const col = cell.dataset.col;
@@ -1185,7 +1185,6 @@
         })
 
         document.querySelectorAll('td.val:not(.empty)').forEach(match => {
-            match.style.backgroundColor = ``
             match.dataset.diff = '';
             match.classList.remove('highlighted')
             match.classList.remove('currentDimension')
@@ -1238,6 +1237,18 @@
 
         cell.addEventListener('pointerdown', selectCellPlus);
     });
+
+    // disable select on click outside value cell
+    document.addEventListener('pointerdown', e => {
+        document.querySelectorAll('td.val:not(.empty)').forEach(match => {
+            match.dataset.diff = '';
+            match.classList.remove('highlighted')
+            match.classList.remove('currentDimension')
+        });
+        document.querySelectorAll('td.dimension').forEach(match => {
+            match.classList.remove('currentDimension');
+        });
+    });
 </script>
 
 </body>