Merge pull request #42 from ML-Leonardo/fix/BCP_1980498907-focus-issue

Set the focus to the input field when the Chat window is opened.

src/components/Input/index.js

@@ -18,9 +18,18 @@ class Input extends Component {
     historyValues: [],
     indexHistory: 0,
     menuOpened: false,
+    isOpen: false,
+    hasFocus: false,
     menuIndexes: [],
   }
 
+  static getDerivedStateFromProps (props, state) {
+    if (!props.isOpen) {
+      return { isOpen: props.isOpen, hasFocus: false }
+    }
+    return { isOpen: props.isOpen }
+  }
+
   componentDidMount () {
     this._input.focus()
     this._input.value = ''
@@ -33,10 +42,14 @@ class Input extends Component {
       nextState.value !== this.state.value
       || nextState.menuOpened !== this.state.menuOpened
       || nextState.menuIndexes.length !== this.state.menuIndexes.length
+      || nextState.isOpen !== this.state.isOpen
     )
   }
 
   componentDidUpdate () {
+    if (this.state.isOpen && !this.state.hasFocus) {
+      this.setFocusState()
+    }
     if (!this.state.value) {
       // Dirty fix textarea placeholder to reset style correctly
       setTimeout(() => {
@@ -49,6 +62,13 @@ class Input extends Component {
     this.onInputHeight()
   }
 
+  setFocusState () {
+    setTimeout(() => {
+      this._input.focus()
+      this.setState({ hasFocus: true })
+    }, 100)
+  }
+
   onInputChange = e => {
     e.persist()
 
@@ -233,6 +253,7 @@ class Input extends Component {
 }
 
 Input.propTypes = {
+  isOpen: PropTypes.bool,
   menu: PropTypes.object,
   onSubmit: PropTypes.func,
   onInputHeight: PropTypes.func,

src/containers/Chat/index.js

@@ -413,6 +413,7 @@ class Chat extends Component {
         </div>
         { !readOnlyMode && <Input
           menu={preferences.menu && preferences.menu.menu}
+          isOpen={show}
           onSubmit={this.sendMessage}
           preferences={preferences}
           onInputHeight={height => this.setState({ inputHeight: height })}