PLT-4433 Gave focus to the search box when the direct channels or channel member modal is opened (#4391)

webapp/components/channel_members_modal.jsx

@@ -13,6 +13,7 @@ import {searchUsers} from 'actions/user_actions.jsx';
 import {removeUserFromChannel} from 'actions/channel_actions.jsx';
 
 import * as AsyncClient from 'utils/async_client.jsx';
+import * as UserAgent from 'utils/user_agent.jsx';
 import * as Utils from 'utils/utils.jsx';
 
 import React from 'react';
@@ -147,6 +148,7 @@ export default class ChannelMembersModal extends React.Component {
                     nextPage={this.nextPage}
                     search={this.search}
                     actions={removeButton}
+                    focusOnMount={!UserAgent.isMobile()}
                 />
             );
         }

webapp/components/more_direct_channels.jsx

@@ -11,6 +11,7 @@ import UserStore from 'stores/user_store.jsx';
 import TeamStore from 'stores/team_store.jsx';
 
 import * as AsyncClient from 'utils/async_client.jsx';
+import * as UserAgent from 'utils/user_agent.jsx';
 import * as Utils from 'utils/utils.jsx';
 import Constants from 'utils/constants.jsx';
 
@@ -258,6 +259,7 @@ export default class MoreDirectChannels extends React.Component {
                         nextPage={this.nextPage}
                         search={this.search}
                         actions={[this.createJoinDirectChannelButton]}
+                        focusOnMount={!UserAgent.isMobile()}
                     />
                 </Modal.Body>
                 <Modal.Footer>

webapp/components/searchable_user_list.jsx

@@ -33,6 +33,12 @@ export default class SearchableUserList extends React.Component {
         };
     }
 
+    componentDidMount() {
+        if (this.props.focusOnMount) {
+            this.refs.filter.focus();
+        }
+    }
+
     componentDidUpdate(prevProps, prevState) {
         if (this.state.page !== prevState.page) {
             $(ReactDOM.findDOMNode(this.refs.userList)).scrollTop(0);
@@ -209,7 +215,8 @@ SearchableUserList.defaultProps = {
     actions: [],
     actionProps: {},
     actionUserProps: {},
-    showTeamToggle: false
+    showTeamToggle: false,
+    focusOnMount: false
 };
 
 SearchableUserList.propTypes = {
@@ -222,5 +229,6 @@ SearchableUserList.propTypes = {
     actions: React.PropTypes.arrayOf(React.PropTypes.func),
     actionProps: React.PropTypes.object,
     actionUserProps: React.PropTypes.object,
-    style: React.PropTypes.object
+    style: React.PropTypes.object,
+    focusOnMount: React.PropTypes.bool.isRequired
 };