mirror of
https://github.com/stablyai/orca.git
synced 2026-10-13 08:02:52 +00:00
fix(settings): replace nested button with div[role=button] in BrowserProfileRow (#995)
This commit is contained in:
@@ -79,11 +79,21 @@ export function BrowserProfileRow({
|
||||
? `${BROWSER_FAMILY_LABELS[profile.source.browserFamily] ?? profile.source.browserFamily}${profile.source.profileName ? ` (${profile.source.profileName})` : ''}`
|
||||
: null
|
||||
|
||||
// Why: uses div[role=button] instead of <button> to avoid nested <button>
|
||||
// elements — the dropdown trigger and trash actions inside also render as
|
||||
// <button>, which is invalid HTML and causes React hydration warnings.
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={onSelect}
|
||||
className={`flex w-full items-center gap-3 rounded-md border px-3 py-2.5 text-left transition-colors ${
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault()
|
||||
onSelect()
|
||||
}
|
||||
}}
|
||||
className={`flex w-full items-center gap-3 rounded-md border px-3 py-2.5 text-left transition-colors cursor-pointer ${
|
||||
isActive
|
||||
? 'border-foreground/20 bg-accent/15'
|
||||
: 'border-border/70 hover:border-border hover:bg-accent/8'
|
||||
@@ -187,6 +197,6 @@ export function BrowserProfileRow({
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user