Inputs are not isolated?

[Akkuma]

If I submit and then switch what Question is rendered the previous values input on the terminal

'use strict';

const { h, render, Component } = require('ink');
const TextInput = require('ink-text-input');

const allQuestions = ['Enter service account', 'enter service key'];

class Question extends Component {
  render(props, state) {
    return (<div>
            {props.question}:
            <TextInput value={state.value || ''} onChange={(value) => this.setState({value})} onSubmit={(val) => {
              props.onSubmit(val);
            //  this.setState({value:''});
            }} />
            </div>);
  }

  shouldComponentUpdate() { return true; }
}

class Gandalf extends Component {
	constructor(props) {
		super(props);

		this.state = {
      question: 0,
      responses: [],
		};
	}

	render(props, state) {
    const { questions } = props;
    const { question, responses } = state;
    if (question >= questions.length) return responses.map((val, i) => (<div>Response {i}: {val}</div>));
		return (
        <Question
      question={questions[question]}
      onSubmit={(value) => this.setState({ question: question + 1, responses: responses.concat(value) })} />
		);
	}

}

render(<Gandalf questions={allQuestions}/>);

If you submit and then go to the next question the value sticks on the line and even is included in the value for the next question. The two ways I got around this are either to manually blank out the value or with my new code is to continue to display the question & value, which is a better experience anyway.

[vadimdemedes]

Could you simplify and format your code? It's pretty hard to follow. Even better, would be great if you could provide a copy-paste code to quickly reproduce this issue.

[entrptaher]

I think he meant it should be isolated and one query should show only after another.
What to be done so it asks username first and then password?

const App = () => {
  const [username, setUsername] = useState();
  const [password, setPassword] = useState();

  return (
      <Box>
        <Box marginRight={1}>Enter your query:</Box>
        {!username && (
          <UncontrolledTextInput
            onSubmit={setUsername}
          />
        )}
        {!password && (
          <UncontrolledTextInput
            onSubmit={setPassword}
          />
        )}
      </Box>
  );
};
export default render(<App />);

[vadimdemedes]

It's not documented (my bad), but there's a focus prop (https://github.com/vadimdemedes/ink-text-input/blob/master/src/index.js#L19), which lets you basically turn on/off individual inputs, so that multiple inputs can be displayed at once, but user input will only be routed to an enabled one. E.g. <TextInput focus={false}/> will ignore user input for that text input.

[entrptaher]

Okay so this is the solution to above problem?

<UncontrolledTextInput focus={!username} onSubmit={setUsername} /> 

Maybe we can add this to the document?

[vadimdemedes]

Yep. Would you be able to add it to readme?

[deadcoder0904]

@entrptaher Did you manage to make it work?

I am trying to but it doesn't work.