fix(clerk-js): SelectOption improvements (#6999)

Author: alexcarpenter

.changeset/forty-experts-battle.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fixes an issue in SelectOption where the focus styles were not being properly applied when the option is focused.
+
+Increases SelectOption touch area to remove any dead spots between items.

packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx

@@ -20,7 +20,7 @@ import {
   useLocalizations,
 } from '../../customizables';
 import { useLocalizeCustomRoles } from '../../hooks/useFetchRoles';
-import { common, type PropsOfComponent, type ThemableCssProp } from '../../styledSystem';
+import { type PropsOfComponent, type ThemableCssProp } from '../../styledSystem';
 
 type MembersListTableProps = {
   headers: LocalizationKey[];
@@ -172,14 +172,6 @@ export const RoleSelect = (props: {
         <RolesListItem
           isSelected={isSelected}
           option={option}
-          sx={theme => ({
-            '&:hover': {
-              background: common.mutedBackground(theme),
-            },
-            '&[data-focused="true"]': {
-              background: common.mutedBackground(theme),
-            },
-          })}
         />
       )}
     >

packages/clerk-js/src/ui/elements/Select.tsx

@@ -7,7 +7,7 @@ import { Button, descriptors, Flex, Icon, Input, Text } from '../customizables';
 import { usePopover, useSearchInput } from '../hooks';
 import { ChevronDown } from '../icons';
 import type { PropsOfComponent, ThemableCssProp } from '../styledSystem';
-import { animations } from '../styledSystem';
+import { animations, common } from '../styledSystem';
 import { colors } from '../utils/colors';
 import { withFloatingTree } from './contexts';
 import type { InputWithIcon } from './InputWithIcon';
@@ -51,17 +51,22 @@ type SelectState<O extends Option> = Pick<
 
 const [SelectStateCtx, useSelectState] = createContextAndHook<SelectState<any>>('SelectState');
 
-const defaultRenderOption = <O extends Option>(option: O, _index?: number, isFocused?: boolean) => {
+const defaultRenderOption = <O extends Option>(option: O, _index?: number) => {
   return (
     <Flex
       sx={theme => ({
+        position: 'relative',
         width: '100%',
         padding: `${theme.space.$2} ${theme.space.$4}`,
         margin: `0 ${theme.space.$1}`,
         borderRadius: theme.radii.$md,
-        ...(isFocused && { backgroundColor: theme.colors.$neutralAlpha100 }),
-        '&:hover': {
-          backgroundColor: theme.colors.$neutralAlpha100,
+        '&:hover, &[data-focused="true"]': {
+          background: common.mutedBackground(theme),
+        },
+        '&::before': {
+          content: '""',
+          position: 'absolute',
+          inset: `calc(${theme.space.$0x5} * -1) calc(${theme.space.$1} * -1)`,
         },
       })}
     >

packages/testing/src/playwright/unstable/page-objects/apiKeys.ts

@@ -43,7 +43,7 @@ export const createAPIKeysComponentPageObject = (testArgs: { page: EnhancedPage
     },
     selectExpiration: async (value?: keyof typeof expirationOptions) => {
       await page.getByRole('button', { name: /Select date/i }).click();
-      return page.getByText(expirationOptions[value ?? 'never'], { exact: true }).click();
+      return page.getByText(expirationOptions[value ?? 'never'], { exact: true }).click({ force: true });
     },
     clickSaveButton: () => {
       return page.getByText(/Create key/i).click();