monadical/opencode
14
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

fix(ui): use focus-visible instead of focus to prevent sticky hover effect on click (#10651)

Browse Source
This commit is contained in:
Rahul A Mistry
2026-01-26 22:28:29 +05:30
committed by GitHub
parent 984518b1c0
commit 783121c06e
6 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/app/src/components/session/session-header.tsx
View File

@@ -131,7 +131,7 @@ export function SessionHeader() {
<Portal mount={mount()}> <Portal mount={mount()}>
<button <button
type="button" type="button"
class="hidden md:flex w-[320px] p-1 pl-1.5 items-center gap-2 justify-between rounded-md border border-border-weak-base bg-surface-raised-base transition-colors cursor-default hover:bg-surface-raised-base-hover focus:bg-surface-raised-base-hover active:bg-surface-raised-base-active" class="hidden md:flex w-[320px] p-1 pl-1.5 items-center gap-2 justify-between rounded-md border border-border-weak-base bg-surface-raised-base transition-colors cursor-default hover:bg-surface-raised-base-hover focus-visible:bg-surface-raised-base-hover active:bg-surface-raised-base-active"
onClick={() => command.trigger("file.open")} onClick={() => command.trigger("file.open")}
aria-label={language.t("session.header.searchFiles")} aria-label={language.t("session.header.searchFiles")}
> >

4
packages/app/src/pages/layout.tsx
View File

@@ -1696,7 +1696,7 @@ export default function Layout(props: ParentProps) {
<div <div
data-session-id={props.session.id} data-session-id={props.session.id}
class="group/session relative w-full rounded-md cursor-default transition-colors pl-2 pr-3 class="group/session relative w-full rounded-md cursor-default transition-colors pl-2 pr-3
hover:bg-surface-raised-base-hover focus-within:bg-surface-raised-base-hover has-[[data-expanded]]:bg-surface-raised-base-hover has-[.active]:bg-surface-base-active" hover:bg-surface-raised-base-hover [&:has(:focus-visible)]:bg-surface-raised-base-hover has-[[data-expanded]]:bg-surface-raised-base-hover has-[.active]:bg-surface-base-active"
> >
<Show <Show
when={hoverEnabled()} when={hoverEnabled()}
@@ -1819,7 +1819,7 @@ export default function Layout(props: ParentProps) {
) )
return ( return (
<div class="group/session relative w-full rounded-md cursor-default transition-colors pl-2 pr-3 hover:bg-surface-raised-base-hover focus-within:bg-surface-raised-base-hover has-[.active]:bg-surface-base-active"> <div class="group/session relative w-full rounded-md cursor-default transition-colors pl-2 pr-3 hover:bg-surface-raised-base-hover [&:has(:focus-visible)]:bg-surface-raised-base-hover has-[.active]:bg-surface-base-active">
<Show <Show
when={!tooltip()} when={!tooltip()}
fallback={ fallback={

2
packages/ui/src/components/button.css
View File

@@ -46,7 +46,7 @@
&:hover:not(:disabled) { &:hover:not(:disabled) {
background-color: var(--surface-raised-base-hover); background-color: var(--surface-raised-base-hover);
} }
&:focus:not(:disabled) { &:focus-visible:not(:disabled) {
background-color: var(--surface-raised-base-hover); background-color: var(--surface-raised-base-hover);
} }
&:active:not(:disabled) { &:active:not(:disabled) {

4
packages/ui/src/components/icon-button.css
View File

@@ -90,8 +90,8 @@
/* color: var(--icon-hover); */ /* color: var(--icon-hover); */
/* } */ /* } */
} }
&:focus:not(:disabled) { &:focus-visible:not(:disabled) {
background-color: var(--surface-focus); background-color: var(--surface-raised-base-hover);
} }
&:active:not(:disabled) { &:active:not(:disabled) {
background-color: var(--surface-raised-base-active); background-color: var(--surface-raised-base-active);

4
packages/ui/src/components/list.css
View File

@@ -40,7 +40,7 @@
transition: opacity 0.15s ease; transition: opacity 0.15s ease;
&:hover:not(:disabled), &:hover:not(:disabled),
&:focus:not(:disabled), &:focus-visible:not(:disabled),
&:active:not(:disabled) { &:active:not(:disabled) {
background-color: transparent; background-color: transparent;
opacity: 0.7; opacity: 0.7;
@@ -91,7 +91,7 @@
transition: opacity 0.15s ease; transition: opacity 0.15s ease;
&:hover:not(:disabled), &:hover:not(:disabled),
&:focus:not(:disabled), &:focus-visible:not(:disabled),
&:active:not(:disabled) { &:active:not(:disabled) {
background-color: transparent; background-color: transparent;
opacity: 0.7; opacity: 0.7;

2
packages/ui/src/components/select.css
View File

@@ -31,7 +31,7 @@
} }
} }
&:not([data-expanded]):focus { &:not([data-expanded]):focus-visible {
&[data-variant="secondary"] { &[data-variant="secondary"] {
background-color: var(--button-secondary-base); background-color: var(--button-secondary-base);
} }