diff --git a/.changeset/dry-carrots-bathe.md b/.changeset/dry-carrots-bathe.md
new file mode 100644
index 00000000000..151f7a2a8e3
--- /dev/null
+++ b/.changeset/dry-carrots-bathe.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+fix(Autocomplete.Overlay): prevent user-defined className from overriding default styles
diff --git a/packages/react/src/Autocomplete/Autocomplete.test.tsx b/packages/react/src/Autocomplete/Autocomplete.test.tsx
index ea8c2a501df..971b7b83ee8 100644
--- a/packages/react/src/Autocomplete/Autocomplete.test.tsx
+++ b/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 => (
-
-
-
- hi
-
-
- ),
- classes.Overlay,
- )
+ return (
+
+ hi
+
+ )
+ }, classes.Overlay)
})
describe('null context', () => {
diff --git a/packages/react/src/Autocomplete/AutocompleteOverlay.tsx b/packages/react/src/Autocomplete/AutocompleteOverlay.tsx
index d72494a7545..caa70236e7a 100644
--- a/packages/react/src/Autocomplete/AutocompleteOverlay.tsx
+++ b/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}
top={position?.top}
left={position?.left}
- className={classes.Overlay}
+ className={clsx(classes.Overlay, className)}
{...overlayProps}
>
{children}