Skip to content

fix(menu): merge content props through getFloatingProps (#806) #2024

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kotAPI wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(menu): merge content props through getFloatingProps (#806) #2024

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions src/core/primitives/Menu/fragments/MenuPrimitiveContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,11 @@ const MenuPrimitiveContent = forwardRef<HTMLDivElement, MenuPrimitiveContentProp
>
<div
ref={mergedRef}
style={floatingStyles}
{...getFloatingProps()}
className={className}
{...props}
{...getFloatingProps({
...props,
className,
style: floatingStyles
})}
Comment on lines +39 to +43

@coderabbitai coderabbitai Bot Jun 23, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

FILE="src/core/primitives/Menu/fragments/MenuPrimitiveContent.tsx"

echo "=== Type definition and call site ==="
nl -ba "$FILE" | sed -n '1,90p'

echo
echo "=== Check whether props type includes HTML attributes ==="
rg -n "export type MenuPrimitiveContentProps|HTMLAttributes<HTMLDivElement>" "$FILE" -C2

echo
echo "=== Check current style merge order in getFloatingProps ==="
rg -n "getFloatingProps\\(|\\.\\.\\.props|style:\\s*floatingStyles" "$FILE" -C2

Repository: rad-ui/ui

Length of output: 225

🏁 Script executed:

#!/bin/bash
set -euo pipefail

FILE="src/core/primitives/Menu/fragments/MenuPrimitiveContent.tsx"

echo "=== File contents lines 1-90 ==="
cat -n "$FILE" | head -90

echo ""
echo "=== Type definition ==="
rg -n "export type MenuPrimitiveContentProps" "$FILE" -A5

echo ""
echo "=== getFloatingProps call site ==="
rg -n "getFloatingProps" "$FILE" -B3 -A5

Repository: rad-ui/ui

Length of output: 3337

Consumer prop composition remains incomplete and style merging overwrites custom styles.

The style: floatingStyles assignment at line 42 deterministically overwrites any style from ...props. Additionally, MenuPrimitiveContentProps narrowly restricts consumers to children and className only, preventing them from passing standard HTML div attributes (data attributes, event handlers, etc.) that the ...props spread attempts but cannot accommodate due to the type constraint.

Suggested fix 
-export type MenuPrimitiveContentProps = {
-    children: React.ReactNode;
-    className?: string;
-};
+export type MenuPrimitiveContentProps = React.HTMLAttributes<HTMLDivElement> & {
+    children: React.ReactNode;
+};

 const MenuPrimitiveContent = forwardRef<HTMLDivElement, MenuPrimitiveContentProps>(
-    ({ children, className, ...props }, propRef) => {
+    ({ children, className, style: styleProp, ...props }, propRef) => {
         const context = useContext(MenuPrimitiveRootContext);
         const mergedRef = Floater.useMergeRefs([
             context?.refs.setFloating,
@@ -37,7 +37,7 @@ const MenuPrimitiveContent = forwardRef<HTMLDivElement, MenuPrimitiveContentPro
                     <div
                         ref={mergedRef}
                         {...getFloatingProps({
                             ...props,
                             className,
-                            style: floatingStyles
+                            style: { ...styleProp, ...floatingStyles }
                         })}
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/core/primitives/Menu/fragments/MenuPrimitiveContent.tsx` around lines 39
- 43, In MenuPrimitiveContentProps, expand the type definition to accept
standard HTML div attributes (such as data attributes, event handlers, and style
properties) in addition to the currently restricted children and className. In
the MenuPrimitiveContent component where getFloatingProps is called, modify the
style composition to merge floatingStyles with any custom style from props
rather than overwriting it, ensuring that custom styles are preserved while
floating positioning styles are applied. This allows consumers to pass through
additional attributes and maintain style precedence as intended.

>
<div style={{overflowY:"auto", overflowX:"hidden"}}>
{children}
Expand Down
Loading