Skip to content

fix: add forwardRef support to button components#98

Open
wendyyuchensun wants to merge 2 commits intocoseeing:mainfrom
wendyyuchensun:btn-ref
Open

fix: add forwardRef support to button components#98
wendyyuchensun wants to merge 2 commits intocoseeing:mainfrom
wendyyuchensun:btn-ref

Conversation

@wendyyuchensun
Copy link
Collaborator

@wendyyuchensun wendyyuchensun commented Mar 8, 2026

React.forwardRef 包裝 PrimaryButton、SecondaryButton 與 TertiaryButton,讓使用者可直接將 ref 綁定至底層的 <button> 元素。

此變更適用於需要存取 DOM 節點的情境,例如將按鈕作為 Headless UI Menu.Button 的觸發元件時,Headless UI 需透過 ref 控制焦點與定位,若元件未支援 forwardRef 則會導致功能異常(e.g. 若無 forwardRef,當 menu 打開時按 esc 鍵,focus 會跑到 document.body,而非預期的 menu trigger button)。

type="button"
className={cn(
'flex items-center justify-center text-text-primary border border-border-main rounded-lg',
'flex items-center justify-center bg-white text-text-primary border border-border-main rounded-lg',
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

bg-white 跟 forwardRef 原題無關,但順便修。

type="button"
className={cn(
'flex items-center justify-center text-primary rounded-lg',
'flex items-center justify-center bg-white text-primary rounded-lg',
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

bg-white 跟 forwardRef 原題無關,但順便修。

Copy link
Collaborator

@jamliaoo jamliaoo left a comment

Choose a reason for hiding this comment

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

LGTM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants