fix: Ensure checkbox label is always clickable

knoxville-utilities-board · Aug 26, 2024 · 6a003b3 · 6a003b3
1 parent c97b4be
commit 6a003b3
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/packages/design-system/src/_forms.scss b/packages/design-system/src/_forms.scss
@@ -85,3 +85,7 @@ select.form-select,
     }
   }
 }
+
+.form-check-label {
+  user-select: none;
+}
diff --git a/packages/ember/src/components/form/checkbox.gts b/packages/ember/src/components/form/checkbox.gts
@@ -24,6 +24,8 @@ export default class FormCheckbox extends BoundValue<
   CheckboxSignature,
   boolean
 > {
+  internalId = crypto.randomUUID();
+
   get classList() {
     const classes = ['form-check-input'];
 
@@ -54,6 +56,10 @@ export default class FormCheckbox extends BoundValue<
     return this.args.type === 'switch';
   }
 
+  get id() {
+    return this.args.id || this.internalId;
+  }
+
   @action
   change(evt: Event) {
     const target = evt.target as HTMLInputElement;
@@ -67,14 +73,14 @@ export default class FormCheckbox extends BoundValue<
         checked={{this.value}}
         class={{this.classList}}
         disabled={{@disabled}}
-        id={{@id}}
+        id={{this.id}}
         role={{if this.isSwitch "switch" "checkbox"}}
         type="checkbox"
         value={{this.value}}
         {{on "change" this.change}}
         ...attributes
       />
-      <label class="form-check-label" for={{@id}}>
+      <label class="form-check-label" for={{this.id}}>
         {{@label}}
       </label>
     </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -85,3 +85,7 @@ select.form-select, @@
         }
       }
     }
+    .form-check-label {
+      user-select: none;
+    }