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

fix(tui): slash command autocomplete highlighted row jumping (#7815)

Browse Source
This commit is contained in:
Kit Langton
2026-01-11 11:11:40 -05:00
committed by GitHub
parent 3205db9c16
commit 43c2da24d0
1 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/opencode/src/cli/cmd/tui/component/prompt/autocomplete.tsx
View File

@@ -1,7 +1,7 @@
import type { BoxRenderable, TextareaRenderable, KeyEvent, ScrollBoxRenderable } from "@opentui/core" import type { BoxRenderable, TextareaRenderable, KeyEvent, ScrollBoxRenderable } from "@opentui/core"
import fuzzysort from "fuzzysort" import fuzzysort from "fuzzysort"
import { firstBy } from "remeda" import { firstBy } from "remeda"
import { createMemo, createResource, createEffect, onMount, onCleanup, For, Show, createSignal } from "solid-js" import { createMemo, createResource, createEffect, onMount, onCleanup, Index, Show, createSignal } from "solid-js"
import { createStore } from "solid-js/store" import { createStore } from "solid-js/store"
import { useSDK } from "@tui/context/sdk" import { useSDK } from "@tui/context/sdk"
import { useSync } from "@tui/context/sync" import { useSync } from "@tui/context/sync"
@@ -686,7 +686,7 @@ export function Autocomplete(props: {
height={height()} height={height()}
scrollbarOptions={{ visible: false }} scrollbarOptions={{ visible: false }}
> >
<For <Index
each={options()} each={options()}
fallback={ fallback={
<box paddingLeft={1} paddingRight={1}> <box paddingLeft={1} paddingRight={1}>
@@ -698,20 +698,20 @@ export function Autocomplete(props: {
<box <box
paddingLeft={1} paddingLeft={1}
paddingRight={1} paddingRight={1}
backgroundColor={index() === store.selected ? theme.primary : undefined} backgroundColor={index === store.selected ? theme.primary : undefined}
flexDirection="row" flexDirection="row"
> >
<text fg={index() === store.selected ? selectedForeground(theme) : theme.text} flexShrink={0}> <text fg={index === store.selected ? selectedForeground(theme) : theme.text} flexShrink={0}>
{option.display} {option().display}
</text> </text>
<Show when={option.description}> <Show when={option().description}>
<text fg={index() === store.selected ? selectedForeground(theme) : theme.textMuted} wrapMode="none"> <text fg={index === store.selected ? selectedForeground(theme) : theme.textMuted} wrapMode="none">
{option.description} {option().description}
</text> </text>
</Show> </Show>
</box> </box>
)} )}
</For> </Index>
</scrollbox> </scrollbox>
</box> </box>
) )