diff --git a/src/components/input/Button.tsx b/src/components/input/Button.tsx
index 8404ff53c..26887da5b 100644
--- a/src/components/input/Button.tsx
+++ b/src/components/input/Button.tsx
@@ -27,6 +27,12 @@ type ComponentProps = {
    */
   title?: string;
 
+  /**
+   * Whether the focus ring should be applied to `:focus` or `:focus-visible`.
+   * Defaults to focus-visible.
+   */
+  focusRing?: 'focus' | 'focus-visible';
+
   /** Use `expanded` prop instead */
   'aria-expanded'?: never;
   /** Use `pressed` prop instead */
@@ -64,6 +70,7 @@ export default function Button({
   size = 'md',
   variant = 'secondary',
   unstyled = false,
+  focusRing = 'focus-visible',
 
   role,
   ...htmlAttributes
@@ -96,8 +103,11 @@ export default function Button({
       {...htmlAttributes}
       className={classnames(
         {
-          'focus-visible-ring transition-colors whitespace-nowrap flex items-center':
-            styled,
+          'transition-colors whitespace-nowrap flex items-center': styled,
+        },
+        styled && {
+          'focus-visible-ring': focusRing === 'focus-visible',
+          'focus:ring outline-none': focusRing === 'focus',
         },
         themed && {
           'font-semibold rounded': true,
diff --git a/src/components/input/SelectNext.tsx b/src/components/input/SelectNext.tsx
index 50567f1e7..f84afb9e5 100644
--- a/src/components/input/SelectNext.tsx
+++ b/src/components/input/SelectNext.tsx
@@ -48,6 +48,7 @@ function SelectOption<T>({
   return (
     <Button
       variant="custom"
+      focusRing="focus"
       classes={classnames(
         'w-full ring-inset rounded-none !p-0',
         'border-t first:border-t-0 bg-transparent',
diff --git a/src/hooks/use-arrow-key-navigation.ts b/src/hooks/use-arrow-key-navigation.ts
index 45e748294..4a8c51eee 100644
--- a/src/hooks/use-arrow-key-navigation.ts
+++ b/src/hooks/use-arrow-key-navigation.ts
@@ -94,6 +94,11 @@ export function useArrowKeyNavigation(
   const lastFocusedItem = useRef<HTMLElement | null>(null);
 
   useEffect(() => {
+    if (!containerVisible) {
+      /* istanbul ignore next - We don't use this callback directly */
+      return () => {};
+    }
+
     if (!containerRef.current) {
       throw new Error('Container ref not set');
     }
@@ -196,11 +201,7 @@ export function useArrowKeyNavigation(
     const initialIndex = lastFocusedItem.current
       ? navigableElements.indexOf(lastFocusedItem.current)
       : 0;
-    updateTabIndexes(
-      navigableElements,
-      initialIndex,
-      containerVisible && autofocus,
-    );
+    updateTabIndexes(navigableElements, initialIndex, autofocus);
 
     const listeners = new ListenerCollection();
 
@@ -215,10 +216,11 @@ export function useArrowKeyNavigation(
         lastFocusedItem.current.focus();
         return;
       }
+
       const elements = getNavigableElements();
       const targetIndex = elements.indexOf(event.target as HTMLElement);
       if (targetIndex >= 0) {
-        updateTabIndexes(elements, targetIndex);
+        updateTabIndexes(elements, targetIndex, autofocus);
       }
     });