diff --git a/src/core/primitives/Menu/fragments/MenuPrimitiveContent.tsx b/src/core/primitives/Menu/fragments/MenuPrimitiveContent.tsx index 50e02febd..d6ba93f34 100644 --- a/src/core/primitives/Menu/fragments/MenuPrimitiveContent.tsx +++ b/src/core/primitives/Menu/fragments/MenuPrimitiveContent.tsx @@ -25,6 +25,10 @@ const MenuPrimitiveContent = forwardRef).style; + const restProps = { ...props } as Record; + delete restProps.style; + return ( <> @@ -36,10 +40,11 @@ const MenuPrimitiveContent = forwardRef
) => Record)({ + ...restProps, + className, + style: { ...consumerStyle, ...floatingStyles } + })} >
{children} diff --git a/src/core/primitives/Menu/tests/MenuPrimitive.floatingProps.test.tsx b/src/core/primitives/Menu/tests/MenuPrimitive.floatingProps.test.tsx new file mode 100644 index 000000000..b170d21af --- /dev/null +++ b/src/core/primitives/Menu/tests/MenuPrimitive.floatingProps.test.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import MenuPrimitive from '~/core/primitives/Menu/MenuPrimitive'; + +describe('Menu floating props merge', () => { + test('preserves consumer onKeyDown on menu content', async() => { + const user = userEvent.setup(); + const onKeyDown = jest.fn(); + + render( + + Open + + + Profile + + + + ); + + const content = screen.getByTestId('menu-content'); + content.focus(); + await user.keyboard('{ArrowDown}'); + expect(onKeyDown).toHaveBeenCalled(); + }); +});