[GH-ISSUE #349] React: `input` `onChange` doesnt get called #857

New issue

Closed

opened 2026-03-14 08:50:34 +03:00 by kerem · 1 comment

kerem commented

2026-03-14 08:50:34 +03:00

Owner

Originally created by @vdawg-git on GitHub (Nov 26, 2025).
Original GitHub issue: https://github.com/anomalyco/opentui/issues/349

Originally assigned to: @msmps on GitHub.

See title. Just wanted to report that.

Originally created by @vdawg-git on GitHub (Nov 26, 2025). Original GitHub issue: https://github.com/anomalyco/opentui/issues/349 Originally assigned to: @msmps on GitHub. See title. Just wanted to report that.

kerem closed this issue

2026-03-14 08:50:39 +03:00

kerem commented

2026-03-14 08:50:45 +03:00

Author

Owner

@msmps commented on GitHub (Nov 29, 2025):

onChange is fired when the input is focused, the current value is different to the previously committed internal value, and the return key is hit...
onInput is fired when you type into the input field...

import { createCliRenderer } from "@opentui/core"
import { createRoot } from "@opentui/react"

export const App = () => {
  return (
    <box style={{ border: true, height: 3 }}>
      <input
        placeholder="Type here..."
        focused
        backgroundColor="transparent"
        onChange={(value) => console.log(`onChange: ${value}`)}
        onInput={(value) => console.log(`onInput: ${value}`)}
      />
    </box>
  )
}

const renderer = await createCliRenderer()
renderer.console.show()
createRoot(renderer).render(<App />)

@msmps commented on GitHub (Nov 29, 2025): - `onChange` is fired when the input is focused, the current value is different to the previously committed internal value, and the return key is hit... - `onInput` is fired when you type into the input field... ```tsx import { createCliRenderer } from "@opentui/core" import { createRoot } from "@opentui/react" export const App = () => { return ( <box style={{ border: true, height: 3 }}> <input placeholder="Type here..." focused backgroundColor="transparent" onChange={(value) => console.log(`onChange: ${value}`)} onInput={(value) => console.log(`onInput: ${value}`)} /> </box> ) } const renderer = await createCliRenderer() renderer.console.show() createRoot(renderer).render(<App />) ```