Skip to content

fix (Breadcrumb): ref not forwarded for trigger #694

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
paanSinghCoder wants to merge 3 commits into
base: main
Choose a base branch
from
Open

fix (Breadcrumb): ref not forwarded for trigger #694

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9c159ad
fix (breadcrumb): ref not forwarded for trigger
paanSinghCoder Mar 11, 2026
c6e9277
fix (breadcrumb): forward props to trigger
paanSinghCoder Mar 11, 2026
7df155f
fix: spread porps
paanSinghCoder Mar 12, 2026
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
6 changes: 5 additions & 1 deletion packages/raystack/components/breadcrumb/breadcrumb-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,11 @@ export const BreadcrumbItem = forwardRef<
if (dropdownItems) {
return (
<Menu>
<Menu.Trigger className={styles['breadcrumb-dropdown-trigger']}>
<Menu.Trigger
ref={ref as React.Ref<HTMLButtonElement>}
className={cx(styles['breadcrumb-dropdown-trigger'], className)}
{...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}
Comment on lines +58 to +61
Copy link
Contributor

@coderabbitai coderabbitai bot Mar 12, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "BreadcrumbItem signature and dropdown ref cast:"
sed -n '20,65p' packages/raystack/components/breadcrumb/breadcrumb-item.tsx

echo
echo "Menu.Trigger definition and forwarded ref target:"
rg -n -C3 'forwardRef<|Trigger' packages/raystack/components/menu

Repository: raystack/apsara

Length of output: 16283

Don't cast the public anchor ref to a button ref.

Line 59 keeps BreadcrumbItem publicly typed as forwardRef<HTMLAnchorElement>, but the dropdown path now writes that ref into Menu.Trigger as HTMLButtonElement. A caller with useRef<HTMLAnchorElement>() will receive a button when dropdownItems is set, so the exported type is now lying. Widen or split the ref type so it matches the rendered element instead of hiding the mismatch with a cast.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@packages/raystack/components/breadcrumb/breadcrumb-item.tsx` around lines 58
- 61, The public ref type for BreadcrumbItem is incorrect because BreadcrumbItem
is declared as forwardRef<HTMLAnchorElement, ...> but when dropdownItems is
present you pass that ref into Menu.Trigger (an HTMLButtonElement) via ref;
change the component's ref type to accurately reflect both render paths—replace
forwardRef<HTMLAnchorElement, ...> with a widened ref type such as
forwardRef<HTMLAnchorElement | HTMLButtonElement, Props> or use a generic
HTMLElement/Element ref (React.Ref<HTMLAnchorElement | HTMLButtonElement> or
React.Ref<HTMLElement>) so callers get the correct element type, and update any
related prop/ref typings and exports (e.g., BreadcrumbItem, Menu.Trigger usage,
and the props interface) to avoid casting the ref with "as".

Copy link
Contributor

@rohanchkrabrty rohanchkrabrty Mar 13, 2026

Choose a reason for hiding this comment

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

Let's not pass AnchorElement props to MenuTrigger

>
{label}
<ChevronDownIcon className={styles['breadcrumb-dropdown-icon']} />
</Menu.Trigger>
Expand Down
Loading