Add onFocus to "input" so that it can accept value programmatically.

[dgg32]

Describe the issue
Currently there is no clear way to set the "value" prop in the "input" element programmatically in the chatbot. For example, if I use the Alan button and want to set the input's value to Alan's speech-to-text result, it doesn't work (Figure below). However, if we add an "onFocus" to "Input" and then trigger a "focus" event, it may do the trick without changing too much code.

So I suggest to add a onfocus to "input":

                onChange={this.onValueChange}
                onFocus={this.onFocus}
                value={inputValue}

And here:

  onValueChange = event => {
    this.setState({ inputValue: event.target.value });
  };

  onFocus = event => {
    this.setState({ inputValue: event.target.value });
  };

  getTriggeredStep = (trigger, value) => {
    const steps = this.generateRenderedStepsById();
    return typeof trigger === 'function' ? trigger({ value, steps }) : trigger;
  };

In my app, I can just trigger it:

const input_field = document.getElementsByClassName("rsc-input")[0];
input_field.value = e.text;
input_field.focus();

Here is my modified version:

https://github.com/dgg32/react-simple-chatbot/blob/master/lib/ChatBot.jsx

Thank you!