From ad6915591a40e07e45b3f7081a2e8c460a80be8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Beno=C3=AEt=20Gr=C3=A9lard?= <benoit.grelard@gmail.com>
Date: Tue, 5 Mar 2024 14:09:51 +0000
Subject: [PATCH] [Label] Don't eagerly prevent double-click (#2753)

* [Label] Don't eagerly prevent double-click

Fixes #2656

* Update Label.stories.tsx

* Update Label.tsx

* PR feedback
---
 .yarn/versions/ded3a040.yml                | 6 ++++++
 packages/react/label/src/Label.stories.tsx | 9 +++++++++
 packages/react/label/src/Label.tsx         | 4 ++++
 3 files changed, 19 insertions(+)
 create mode 100644 .yarn/versions/ded3a040.yml

diff --git a/.yarn/versions/ded3a040.yml b/.yarn/versions/ded3a040.yml
new file mode 100644
index 000000000..1f88f22d8
--- /dev/null
+++ 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
index 7e39724db..e4db9c0e3 100644
--- a/packages/react/label/src/Label.stories.tsx
+++ b/packages/react/label/src/Label.stories.tsx
@@ -21,6 +21,15 @@ export const WithControl = () => {
   );
 };
 
+export const WithInputNumber = (props: any) => {
+  return (
+    <Label>
+      <span>Name:</span>
+      <input type="number" />
+    </Label>
+  );
+};
+
 const Control = (props: any) => {
   return (
     <button className={controlClass()} {...props} onClick={() => window.alert('clicked')}>
diff --git a/packages/react/label/src/Label.tsx b/packages/react/label/src/Label.tsx
index af90a8948..7c5f04392 100644
--- 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('button, input, select, textarea')) return;
+
         props.onMouseDown?.(event);
         // prevent text selection when double clicking label
         if (!event.defaultPrevented && event.detail > 1) event.preventDefault();