Make the select item text non-selectable

fullofcaffeine · fullofcaffeine · commit c757eb0a46b6 · 2024-05-20T18:24:58.000-06:00
This was making the l-beam cursor appear when hovering over the items,
which is distracting when you want to just select an item for
the select.
diff --git a/packages/components/src/custom-select-control-v2/styles.ts b/packages/components/src/custom-select-control-v2/styles.ts
@@ -118,6 +118,7 @@ export const SelectItem = styled( Ariakit.SelectItem )`
 	padding: ${ ITEM_PADDING };
 	font-size: ${ CONFIG.fontSize };
 	line-height: 2.15rem; // TODO: Remove this in default but keep for back-compat in legacy
+	user-select: none;
 	&[data-active-item] {
 		background-color: ${ COLORS.theme.gray[ 300 ] };
 	}

Original file line number	Diff line number	Diff line change
@@ -118,6 +118,7 @@ export const SelectItem = styled( Ariakit.SelectItem )`
`118`	`118`	`padding: ${ ITEM_PADDING };`
`119`	`119`	`font-size: ${ CONFIG.fontSize };`
`120`	`120`	`line-height: 2.15rem; // TODO: Remove this in default but keep for back-compat in legacy`
	`121`	`+ user-select: none;`
`121`	`122`	`&[data-active-item] {`
`122`	`123`	`background-color: ${ COLORS.theme.gray[ 300 ] };`
`123`	`124`	`}`