mirror of
https://github.com/stablyai/orca
synced 2026-04-21 14:17:16 +00:00
fix: resolve invalid nested button DOM in worktree group headers
The group header row in the sidebar's worktree list was a <button> containing an inner <Button> for the "Create worktree" action. HTML does not allow <button> inside <button>, causing React hydration warnings. Replace the outer <button> with a <div role="button"> to preserve accessibility while fixing the DOM nesting violation.
This commit is contained in:
parent
e17d917afe
commit
f73ba9329e
1 changed files with 11 additions and 3 deletions
|
|
@ -287,12 +287,20 @@ const VirtualizedWorktreeViewport = React.memo(function VirtualizedWorktreeViewp
|
|||
className="absolute left-0 right-0"
|
||||
style={{ transform: `translateY(${vItem.start}px)` }}
|
||||
>
|
||||
<button
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
className={cn(
|
||||
'group mt-2 flex h-7 w-full items-center gap-1.5 px-1.5 text-left transition-all',
|
||||
'group mt-2 flex h-7 w-full items-center gap-1.5 px-1.5 text-left transition-all cursor-pointer',
|
||||
row.repo ? 'overflow-hidden' : row.tone
|
||||
)}
|
||||
onClick={() => toggleGroup(row.key)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault()
|
||||
toggleGroup(row.key)
|
||||
}
|
||||
}}
|
||||
>
|
||||
{row.icon ? (
|
||||
<div
|
||||
|
|
@ -354,7 +362,7 @@ const VirtualizedWorktreeViewport = React.memo(function VirtualizedWorktreeViewp
|
|||
)}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue