I created two TextInputs, both update simultaneously

[anotherchrisatwork]

Both are rendered, but when the code runs, there is a cursor in each one, and whatever I type shows up in both. There also doesn't seem to be any way to change focus (sorry, I'm new to Ink!).

Here's the code. There are two files, index.js:

import React from 'react'
import { render } from 'ink'

import App from './App'

try {
  render(<App />)
} catch (err) {
  console.log('index.js main caught', err)
}

And App.js, where the two TextInputs are created and used:

import React from 'react'
import { Box } from 'ink'
import TextInput from 'ink-text-input'

class NumberInput extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      entry: '',
    }

    this.handleChange = this.handleChange.bind(this)
  }

  render() {
    return (
      <Box>
        <Box marginRight={1}>{this.props.title}</Box>

        <TextInput value={this.state.entry} onChange={this.handleChange} />
      </Box>
    )
  }

  handleChange(entry) {
    this.setState({ entry })
    try {
      const num = Number(entry)
      if (!Number.isNaN(num)) {
        this.props.setValue(num)
      }
    } catch (err) {
      console.log('NumberInput.handleChange caught', err)
    }
  }
}

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      first: 0,
      second: 0,
    }

    this.setFirst = this.setFirst.bind(this)
    this.setSecond = this.setSecond.bind(this)
  }

  setFirst(val) {
    this.setState({ first: val })
  }

  setSecond(val) {
    this.setState({ second: val })
  }

  render() {
    return (
      <Box flexDirection="column">
        <Box>Adder</Box>
        <NumberInput
          key={'first'}
          setValue={this.setFirst}
          title="First number:"
        />
        <NumberInput
          key={'second'}
          setValue={this.setSecond}
          title="Second number:"
        />

        <Box>Sum: {this.state.first + this.state.second}</Box>
      </Box>
    )
  }
}

export default App

[vadimdemedes]

There's actually focus={true/false} prop, which I think got erased from readme accidentally:

<TextInput focus={false}/>

If you pass false, user input will be ignored for this component. This will allow you to have multiple text inputs at the same time.

[anotherchrisatwork]

Cool, thanks, that works! And I guess I have to go to rawmode to allow watching for a tab character (or figure out some other way) to allow the user to switch focus?

[vadimdemedes]

Exactly, user input without raw mode isn't possible.