opentui
opentui copied to clipboard
fix: iTerm2 cursor blinking issue
Closes https://github.com/sst/opencode/issues/3780
This can be fixed either by enabling a checkbox in iTerm2 (see https://github.com/sst/opencode/issues/3780#issuecomment-3508037343) or by merging this PR, which prevents showing the cursor ANSI code on every render.
To reproduce, run the following in iTerm2:
import { render } from "./index"
import { createEffect, createSignal, onCleanup } from "solid-js"
function ScrollFail() {
const [increasingText, setIncreasingText] = createSignal("Build")
createEffect(() => {
const interval = setInterval(() => {
setIncreasingText((v) => (v.length > 10 ? "" : v + "a"))
}, 10)
onCleanup(() => {
clearInterval(interval)
})
})
return (
<box flexDirection="column" gap={1}>
<box flexShrink={0}>
<text>{increasingText()}</text>
</box>
<box flexShrink={0} borderStyle="single" borderColor={"#f0f"}>
<textarea
onMouseDown={(r: MouseEvent) => r.target?.focus()}
cursorColor={"#00f"}
focusedBackgroundColor={"#eee"}
minHeight={2}
maxHeight={6}
/>
</box>
</box>
)
}
render(() => <ScrollFail />)
Before PR
After PR
This is a really annoying issue in iTerm2.
On Mac, I've also tested this with WezTerm and VS Code Terminal. There is no issue on either, and I've verified that the PR works on both.
In iTerm2, I've also tested that the blinking cursor still works correctly.
Thanks! I see the issue. Problem here is that not hiding the cursor for a frame will make it flicker across the screen for other terminals. I want to use Private Mode 2026, which is supported by iTerm2 as well and would alleviate the flickering.
writer.writeAll(ansi.ANSI.syncSet) // "\x1b[?2026h"
// and
writer.writeAll(ansi.ANSI.syncReset) // "\x1b[?2026l"
I agree however that setting the cursor color and style when it did not change for every frame should be avoided.
I've restored the hide cursor functionality and it still works well in iTerm2. It seems the actual issue was the color change. This would probably be better to add before entering private mode.
if (styleChanged) { also can be reverted as seems like has no effect too.
if (colorChanged) { is the real fix