fix(select): use pointer cursor for expanded options

This commit is contained in:
dongmucat 2026-03-20 13:58:26 +08:00 • committed by Xudong Sun
parent 862328a915
commit 0dea20f4be
2 changed files with 13 additions and 9 deletions

View file

@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest'
import {
SELECT_CONTENT_CLASS_NAME,
SELECT_ITEM_CLASS_NAME,
SELECT_SCROLL_BUTTON_CLASS_NAME,
SELECT_TRIGGER_CLASS_NAME,
normalizeSelectValue,
} from './select'
@ -31,6 +32,11 @@ describe('shared select contract', () => {
expect(SELECT_ITEM_CLASS_NAME).toContain('rounded-md')
})
it('uses pointer cursors for expanded select interactions', () => {
expect(SELECT_ITEM_CLASS_NAME).toContain('cursor-pointer')
expect(SELECT_SCROLL_BUTTON_CLASS_NAME).toContain('cursor-pointer')
})
it('maps empty and nullish form state to an undefined Radix value', () => {
expect(normalizeSelectValue('')).toBeUndefined()
expect(normalizeSelectValue(null)).toBeUndefined()

View file

@ -21,10 +21,14 @@ export const SELECT_CONTENT_CLASS_NAME = cn(
)
export const SELECT_ITEM_CLASS_NAME = cn(
'relative flex w-full cursor-default select-none items-center rounded-md py-2 pl-8 pr-8 text-sm outline-none',
'relative flex w-full cursor-pointer select-none items-center rounded-md py-2 pl-8 pr-8 text-sm outline-none',
'focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50'
)
export const SELECT_SCROLL_BUTTON_CLASS_NAME = cn(
'flex cursor-pointer items-center justify-center py-1 text-muted-foreground'
)
export function normalizeSelectValue(value?: string | null) {
return typeof value === 'string' && value.length > 0 ? value : undefined
}
@ -57,10 +61,7 @@ const SelectScrollUpButton = React.forwardRef<
>(({ className, ...props }, ref) => (
<SelectPrimitive.ScrollUpButton
ref={ref}
className={cn(
'flex cursor-default items-center justify-center py-1 text-muted-foreground',
className
)}
className={cn(SELECT_SCROLL_BUTTON_CLASS_NAME, className)}
{...props}
>
<ChevronUp className="h-4 w-4" />
@ -75,10 +76,7 @@ const SelectScrollDownButton = React.forwardRef<
>(({ className, ...props }, ref) => (
<SelectPrimitive.ScrollDownButton
ref={ref}
className={cn(
'flex cursor-default items-center justify-center py-1 text-muted-foreground',
className
)}
className={cn(SELECT_SCROLL_BUTTON_CLASS_NAME, className)}
{...props}
>
<ChevronDown className="h-4 w-4" />