fix(Autocomplete.Overlay): prevent user-defined className from overriding default styles

.changeset/dry-carrots-bathe.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+fix(Autocomplete.Overlay): prevent user-defined className from overriding default styles

packages/react/src/Autocomplete/Autocomplete.test.tsx

@@ -8,6 +8,7 @@ import type {AutocompleteMenuInternalProps, AutocompleteMenuItem} from '../Autoc
 import BaseStyles from '../BaseStyles'
 import {implementsClassName} from '../utils/testing'
 import classes from './AutocompleteOverlay.module.css'
+import {AutocompleteContext} from './AutocompleteContext'
 
 const mockItems = [
   {text: 'zero', id: '0'},
@@ -441,21 +442,32 @@ describe('Autocomplete', () => {
       expect(screen.getByText('Three')).toBeInTheDocument()
     })
   })
+  describe('Autocomplete.Overlay', () => {
+    implementsClassName(props => {
+      // Create a context with showMenu set to true
+      const mockContext = {
+        activeDescendantRef: {current: null},
+        autocompleteSuggestion: '',
+        id: 'test-id',
+        inputRef: {current: document.createElement('input')},
+        inputValue: '',
+        isMenuDirectlyActivated: false,
+        scrollContainerRef: {current: null},
+        selectedItemLength: 0,
+        setAutocompleteSuggestion: () => {},
+        setInputValue: () => {},
+        setIsMenuDirectlyActivated: () => {},
+        setSelectedItemLength: () => {},
+        setShowMenu: () => {},
+        showMenu: true, // Force the menu to show
+      }
 
-  // TODO: Enable once className override bug is fixed in Autocomplete.Overlay, also remember to remove from ignore list on script/check-classname-tests.mjs
-  // eslint-disable-next-line vitest/no-disabled-tests
-  describe.skip('Autocomplete.Overlay', () => {
-    implementsClassName(
-      props => (
-        <Autocomplete id="autocompleteId">
-          <Autocomplete.Input />
-          <Autocomplete.Overlay {...props} visibility="visible">
-            hi
-          </Autocomplete.Overlay>
-        </Autocomplete>
-      ),
-      classes.Overlay,
-    )
+      return (
+        <AutocompleteContext.Provider value={mockContext}>
+          <Autocomplete.Overlay {...props}>hi</Autocomplete.Overlay>
+        </AutocompleteContext.Provider>
+      )
+    }, classes.Overlay)
   })
 
   describe('null context', () => {

packages/react/src/Autocomplete/AutocompleteOverlay.tsx

@@ -9,6 +9,7 @@ import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
 import VisuallyHidden from '../_VisuallyHidden'
 
 import classes from './AutocompleteOverlay.module.css'
+import {clsx} from 'clsx'
 
 type AutocompleteOverlayInternalProps = {
   /**
@@ -27,6 +28,7 @@ function AutocompleteOverlay({
   menuAnchorRef,
   overlayProps: oldOverlayProps,
   children,
+  className,
   ...newOverlayProps
 }: AutocompleteOverlayInternalProps) {
   const autocompleteContext = useContext(AutocompleteContext)
@@ -63,7 +65,7 @@ function AutocompleteOverlay({
       ref={floatingElementRef as React.RefObject<HTMLDivElement>}
       top={position?.top}
       left={position?.left}
-      className={classes.Overlay}
+      className={clsx(classes.Overlay, className)}
       {...overlayProps}
     >
       {children}