From 4abf0d558cf8398da646d8d69e12a970ede98945 Mon Sep 17 00:00:00 2001
From: Kenji Shiroma <kenjishiromajp@gmail.com>
Date: Fri, 10 Nov 2023 16:31:38 +1000
Subject: [PATCH] closes #269 focus ring bug

---
 .../components/brand-select/brand-select.component.tsx       | 4 ++--
 .../(home)/components/brand-select/brand-select.styles.ts    | 5 ++---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/apps/site/src/app/(home)/components/brand-select/brand-select.component.tsx b/apps/site/src/app/(home)/components/brand-select/brand-select.component.tsx
index d218ec7a5..010c135cb 100644
--- a/apps/site/src/app/(home)/components/brand-select/brand-select.component.tsx
+++ b/apps/site/src/app/(home)/components/brand-select/brand-select.component.tsx
@@ -5,7 +5,7 @@ import { Item, ItemProps, useSelectState } from 'react-stately';
 
 import { GELLogo } from '@/components/logos';
 
-import { styles as sidebarSelectStyles } from './brand-select.styles';
+import { styles as brandSelectStyles } from './brand-select.styles';
 import { type BrandSelectProps } from './brand-select.types';
 import { ListBox } from './components/list-box';
 import { Popover } from './components/popover';
@@ -23,7 +23,7 @@ export function BrandSelect(props: BrandSelectProps) {
   const { buttonProps } = useButton(triggerProps, ref);
 
   const { focusProps, isFocusVisible } = useFocusRing();
-  const styles = sidebarSelectStyles({ isFocusVisible, isOpen: state.isOpen });
+  const styles = brandSelectStyles({ isFocusVisible, isOpen: state.isOpen });
 
   return (
     <div className={styles.base()}>
diff --git a/apps/site/src/app/(home)/components/brand-select/brand-select.styles.ts b/apps/site/src/app/(home)/components/brand-select/brand-select.styles.ts
index de4731806..b9c2d1630 100644
--- a/apps/site/src/app/(home)/components/brand-select/brand-select.styles.ts
+++ b/apps/site/src/app/(home)/components/brand-select/brand-select.styles.ts
@@ -5,8 +5,7 @@ export const styles = tv(
     slots: {
       base: 'relative flex w-full flex-col',
       label: 'block cursor-default text-left text-sm font-medium text-text',
-      button:
-        'relative flex h-11 max-w-full cursor-pointer flex-row items-stretch overflow-hidden outline-none focus:focus-outline',
+      button: 'relative flex h-11 max-w-full cursor-pointer flex-row items-stretch overflow-hidden outline-none',
       // TODO: this is a workaround to align, but need to find a better way.
       popover: 'ml-[-0.75rem] w-full',
       // icon: 'text-primary transition-transform',
@@ -16,7 +15,7 @@ export const styles = tv(
     variants: {
       isFocusVisible: {
         true: {
-          base: '',
+          base: 'focus-outline',
         },
         false: {},
       },