diff --git a/web/src/shared/ui/select.test.ts b/web/src/shared/ui/select.test.ts index 09d397e3..7bb7df1a 100644 --- a/web/src/shared/ui/select.test.ts +++ b/web/src/shared/ui/select.test.ts @@ -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() diff --git a/web/src/shared/ui/select.tsx b/web/src/shared/ui/select.tsx index 80e5888c..4b441c63 100644 --- a/web/src/shared/ui/select.tsx +++ b/web/src/shared/ui/select.tsx @@ -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) => ( @@ -75,10 +76,7 @@ const SelectScrollDownButton = React.forwardRef< >(({ className, ...props }, ref) => (