Merge pull request #262 from mattermost/fix-focus-of-webview

Fix webview doesn't get focus correctly

Close #231

CHANGELOG.md

@@ -36,6 +36,7 @@ Release date: TBD
 
 ### Bug Fixes
 - Fixed an issue where the maximized state of the app window was lost in some cases.
+- Fixed an issue some shortcuts didn't work when switching applications or tabs in some cases.
 
 #### Windows
 - Fixed pixelated application icons in top left of the window.

package.json

@@ -39,7 +39,7 @@
     "electron-builder": "5.2.1",
     "electron-connect": "~0.3.9",
     "electron-packager": "^7.0.1",
-    "electron-prebuilt": "1.2.7",
+    "electron-prebuilt": "1.2.8",
     "electron-winstaller": "^2.2.0",
     "esformatter": "^0.9.6",
     "esformatter-jsx": "^7.0.1",

src/browser/index.jsx

@@ -82,10 +82,8 @@ var MainPage = React.createClass({
     });
 
     var focusListener = function() {
-      var webview = document.getElementById('mattermostView' + thisObj.state.key);
-      webview.focus();
-
       thisObj.handleOnTeamFocused(thisObj.state.key);
+      thisObj.refs[`mattermostView${thisObj.state.key}`].focusOnWebView();
     };
 
     var currentWindow = remote.getCurrentWindow();
@@ -94,14 +92,17 @@ var MainPage = React.createClass({
       currentWindow.removeListener('focus', focusListener);
     });
   },
+  componentDidUpdate: function() {
+    this.refs[`mattermostView${this.state.key}`].focusOnWebView();
+  },
   handleSelect: function(key) {
     const newKey = (this.props.teams.length + key) % this.props.teams.length;
     this.setState({
       key: newKey
     });
-    this.handleOnTeamFocused(key);
+    this.handleOnTeamFocused(newKey);
 
-    var webview = document.getElementById('mattermostView' + key);
+    var webview = document.getElementById('mattermostView' + newKey);
     ipcRenderer.send('update-title', {
       title: webview.getTitle()
     });
@@ -455,6 +456,13 @@ var MattermostView = React.createClass({
       webContents.reload();
     });
   },
+  focusOnWebView: function() {
+    const webview = ReactDOM.findDOMNode(this.refs.webview);
+    if (!webview.getWebContents().isFocused()) {
+      webview.focus();
+      webview.getWebContents().focus();
+    }
+  },
   render: function() {
     const errorView = this.state.errorInfo ? (<ErrorView id={ this.props.id + '-fail' } style={ this.props.style } className="errorView" errorInfo={ this.state.errorInfo }></ErrorView>) : null;
     // 'disablewebsecurity' is necessary to display external images.