heatmaps: part 5

website/scripts/utils/dom.js

@@ -281,18 +281,16 @@ export function createSelect({
     return span;
   }
 
-  const field = window.document.createElement("div");
-  field.classList.add("field");
+  const field = window.document.createElement("label");
+  if (label) {
+    const span = window.document.createElement("span");
+    span.textContent = label;
+    field.append(span);
+  }
 
   const select = window.document.createElement("select");
   select.id = id ?? "";
   select.name = id ?? "";
-  if (label) {
-    const labelElement = window.document.createElement("label");
-    labelElement.htmlFor = select.id;
-    labelElement.textContent = label;
-    field.append(labelElement);
-  }
   field.append(select);
 
   /** @param {T} choice */
@@ -333,6 +331,7 @@ export function createSelect({
 
   field.addEventListener("click", (e) => {
     if (e.target !== select) {
+      e.preventDefault();
       select.showPicker();
     }
   });

website/src/heatmap/style.css

@@ -31,7 +31,7 @@
     padding: 0.5rem var(--main-padding);
     gap: 1rem;
 
-    > div.field {
+    > label {
       display: flex;
       align-items: baseline;
       flex-shrink: 0;
@@ -39,7 +39,7 @@
       cursor: pointer;
       color: var(--color);
 
-      > label {
+      > span:first-child {
         color: var(--off-color);
       }
 

website/styles/chart.css

@@ -144,7 +144,7 @@
     margin-right: var(--negative-main-padding);
     margin-left: var(--negative-main-padding);
 
-    div.field {
+    :is(div.field, label:has(> select)) {
       display: flex;
       flex-shrink: 0;
       gap: 0.375rem;