diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.test.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.test.tsx index 18ad29d3b9f..e84d8e60c1b 100644 --- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.test.tsx +++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.test.tsx @@ -145,4 +145,66 @@ describe('AnchoredOverlay', () => { }, }) }) + + it('should not overwrite ref from overlayProps', () => { + const overlayRef = {current: null as HTMLDivElement | null} + + const TestComponentWithOverlayRef = () => { + const [open, setOpen] = useState(true) + + return ( + + setOpen(true)} + onClose={() => setOpen(false)} + renderAnchor={props => } + overlayProps={{ref: overlayRef}} + > +
Overlay Content
+
+
+ ) + } + + const {baseElement} = render() + const overlayContent = baseElement.querySelector('[data-testid="overlay-content"]') + + // The overlay should be rendered + expect(overlayContent).toBeTruthy() + expect(overlayContent?.textContent).toBe('Overlay Content') + + // The ref should be assigned to the overlay element + expect(overlayRef.current).toBeTruthy() + expect(overlayRef.current?.getAttribute('role')).toBe('none') + }) + + it('should handle callback ref from overlayProps', () => { + const mockRefCallback = vi.fn() + + const TestComponentWithCallbackRef = () => { + const [open, setOpen] = useState(true) + + return ( + + setOpen(true)} + onClose={() => setOpen(false)} + renderAnchor={props => } + overlayProps={{ref: mockRefCallback}} + > +
Overlay Content
+
+
+ ) + } + + render() + + // The callback ref should have been called with the overlay element + expect(mockRefCallback).toHaveBeenCalled() + expect(mockRefCallback.mock.calls[0][0]).toBeTruthy() + expect(mockRefCallback.mock.calls[0][0]?.getAttribute('role')).toBe('none') + }) })