put back focus: classes on Select

Author: benjamincanac

src/theme/select-menu.ts

@@ -8,6 +8,15 @@ export default (options: Required<ModuleOptions>) => {
       input: 'border-b border-default',
       focusScope: 'flex flex-col min-h-0',
       content: (content: string) => [content, 'origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)']
-    }
+    },
+    compoundVariants: (prev: Record<string, any>[]) => prev.map(item => ({
+      ...item,
+      class: typeof item.class === 'string' ? replaceFocus(item.class) : item.class
+    }))
   }, select(options))
 }
+
+function replaceFocus(str: string): string {
+  return str
+    .replace(/focus:/g, 'focus-visible:')
+}

src/theme/select.ts

@@ -81,6 +81,15 @@ export default (options: Required<ModuleOptions>) => {
           empty: 'p-2 text-base'
         }
       }
-    }
+    },
+    compoundVariants: (prev: Record<string, any>[]) => prev.map(item => ({
+      ...item,
+      class: typeof item.class === 'string' ? replaceFocus(item.class) : item.class
+    }))
   }, input(options))
 }
+
+function replaceFocus(str: string): string {
+  return str
+    .replace(/focus-visible:/g, 'focus:')
+}