PLT-4783 Fix autofocus for "Add/Manage Members" and "More public channels" modals (#4610)

* test fix

* additional test fix

* removed commented line

* test fix

additional test fix

removed commented line

fixed sidebar, rolled back web_client fix

* fix for more_channels input focus bug

webapp/components/channel_invite_modal.jsx

@@ -12,6 +12,7 @@ import TeamStore from 'stores/team_store.jsx';
 import {searchUsers} from 'actions/user_actions.jsx';
 
 import * as AsyncClient from 'utils/async_client.jsx';
+import * as UserAgent from 'utils/user_agent.jsx';
 
 import React from 'react';
 import {Modal} from 'react-bootstrap';
@@ -140,6 +141,7 @@ export default class ChannelInviteModal extends React.Component {
                     nextPage={this.nextPage}
                     search={this.search}
                     actions={[ChannelInviteButton]}
+                    focusOnMount={!UserAgent.isMobile()}
                     actionProps={{
                         channel: this.props.channel,
                         onInviteError: this.handleInviteError

webapp/components/member_list_team.jsx

@@ -12,6 +12,8 @@ import {getTeamStats} from 'utils/async_client.jsx';
 
 import Constants from 'utils/constants.jsx';
 
+import * as UserAgent from 'utils/user_agent.jsx';
+
 import React from 'react';
 
 const USERS_PER_PAGE = 50;
@@ -132,6 +134,7 @@ export default class MemberListTeam extends React.Component {
                 search={this.search}
                 actions={teamMembersDropdown}
                 actionUserProps={actionUserProps}
+                focusOnMount={!UserAgent.isMobile()}
             />
         );
     }

webapp/components/sidebar.jsx

@@ -19,6 +19,7 @@ import * as AsyncClient from 'utils/async_client.jsx';
 import * as Utils from 'utils/utils.jsx';
 import * as ChannelUtils from 'utils/channel_utils.jsx';
 import * as ChannelActions from 'actions/channel_actions.jsx';
+import * as UserAgent from 'utils/user_agent.jsx';
 
 import Constants from 'utils/constants.jsx';
 
@@ -341,6 +342,11 @@ export default class Sidebar extends React.Component {
     showMoreChannelsModal() {
         // manually show the modal because using data-toggle messes with keyboard focus when the modal is dismissed
         $('#more_channels').modal({'data-channeltype': 'O'}).modal('show');
+        $('#more_channels').on('shown.bs.modal', () => {
+            if (!UserAgent.isMobile()) {
+                $('#more_channels input').focus();
+            }
+        });
     }
 
     showNewChannelModal(type) {

webapp/components/sidebar_header_dropdown.jsx

@@ -121,7 +121,6 @@ export default class SidebarHeaderDropdown extends React.Component {
         e.preventDefault();
 
         this.setState({
-            showDropdown: false,
             showTeamMembersModal: true
         });
     }
@@ -448,6 +447,7 @@ export default class SidebarHeaderDropdown extends React.Component {
         if (this.state.showTeamMembersModal) {
             teamMembersModal = (
                 <TeamMembersModal
+                    onLoad={this.toggleDropdown}
                     onHide={this.hideTeamMembersModal}
                     isAdmin={isAdmin}
                 />

webapp/components/team_members_modal.jsx

@@ -25,6 +25,9 @@ export default class TeamMembersModal extends React.Component {
 
     componentDidMount() {
         TeamStore.addChangeListener(this.teamChanged);
+        if (this.props.onLoad) {
+            this.props.onLoad();
+        }
     }
 
     componentWillUnmount() {
@@ -75,5 +78,6 @@ export default class TeamMembersModal extends React.Component {
 
 TeamMembersModal.propTypes = {
     onHide: React.PropTypes.func.isRequired,
-    isAdmin: React.PropTypes.bool.isRequired
+    isAdmin: React.PropTypes.bool.isRequired,
+    onLoad: React.PropTypes.func
 };