[Label] Make optional the prevention of text selection when double clicking label

[Zwyx]

Feature request

Overview

The Label primitive prevents text selection when double clicking the label.

This also prevents using the "up/down" arrows of an input element of type number placed inside the Label.

Adding an option to Label to disable the prevention of text selection would be great.

Who does this impact? Who is this for?

Advanced users. This request might be too specific, feel free to close this issue.

[kal07]

Here the source code of label
const Label = React.forwardRef<LabelElement, LabelProps>((props, forwardedRef) => { return ( <Primitive.label {...props} ref={forwardedRef} onMouseDown={(event) => { props.onMouseDown?.(event); // prevent text selection when double clicking label if (!event.defaultPrevented && event.detail > 1) event.preventDefault(); }} /> ); });
You can use the label component that is available from @radix-ui/react-primitive package since the only difference is onMouseDown
import { Primitive } from '@radix-ui/react-primitive'; export const Label = Primitive.label

[Zwyx]

Ah excellent, thanks for that! I use Shadcn UI, so I modified its Label component to add a disableSelectionPrevention option, as follow:

import * as LabelPrimitive from "@radix-ui/react-label";
import { Primitive } from "@radix-ui/react-primitive";
import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";

import { cn } from "@/lib/utils";

const labelVariants = cva(
	"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
);

const Label = React.forwardRef<
	React.ElementRef<typeof LabelPrimitive.Root>,
	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
		VariantProps<typeof labelVariants> & {
			disableSelectionPrevention?: boolean;
		}
>(({ className, disableSelectionPrevention, ...props }, ref) => {
	const Component = disableSelectionPrevention
		? Primitive.label
		: LabelPrimitive.Root;

	return (
		<Component
			ref={ref}
			className={cn(labelVariants(), className)}
			{...props}
		/>
	);
});
Label.displayName = LabelPrimitive.Root.displayName;

export { Label };

I'll let the people at WorkOS decide if they want to add this option to @radix-ui/react-label, I still think it could be useful. If not, feel free to close this issue 🙂

[benoitgrelard]

I've addressed the issue in #2753.

[Zwyx]

Oh excellent! Thanks for doing that!