[Label] Don't eagerly prevent double-click

Fixes #2656
radix-ui · Mar 5, 2024 · c1e9c99 · c1e9c99
1 parent 7d884d2
commit c1e9c99
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 0 deletions.
diff --git a/.yarn/versions/ded3a040.yml b/.yarn/versions/ded3a040.yml
@@ -0,0 +1,6 @@
+releases:
+  "@radix-ui/react-form": patch
+  "@radix-ui/react-label": patch
+
+declined:
+  - primitives
diff --git a/packages/react/label/src/Label.stories.tsx b/packages/react/label/src/Label.stories.tsx
@@ -14,6 +14,13 @@ export const WithControl = () => {
         <Control className={controlClass()} /> Label
       </Label>
 
+      <br />
+
+      <Label>
+        <span>Name:</span>
+        <input type="number" />
+      </Label>
+
       <h1>Referencing control</h1>
       <Control id="control" className={controlClass()} />
       <Label htmlFor="control">Label</Label>

diff --git a/packages/react/label/src/Label.tsx b/packages/react/label/src/Label.tsx
@@ -19,6 +19,10 @@ const Label = React.forwardRef<LabelElement, LabelProps>((props, forwardedRef) =
       {...props}
       ref={forwardedRef}
       onMouseDown={(event) => {
+        // only prevent text selection if clicking inside the label itself
+        const target = event.target as HTMLElement;
+        if (target.closest('input, button')) return;
+
         props.onMouseDown?.(event);
         // prevent text selection when double clicking label
         if (!event.defaultPrevented && event.detail > 1) event.preventDefault();