[MM-25429]/[MM-25433] fix finder focus, align buttons, keep state consistent (#1301)

* [MM-25429] fix finder focus, align buttons, keep state consistent

* wip

* actually fix the problem

* remove logs

* move finder class with the rest of the classes, back to top

* address ux comments

src/browser/components/Finder.jsx

@@ -38,7 +38,10 @@ export default class Finder extends React.Component {
   }
 
   findNext = () => {
-    this.webview.findInPage(this.state.searchTxt);
+    this.webview.findInPage(this.state.searchTxt, {
+      forward: true,
+      findNext: true,
+    });
   };
 
   find = (keyword) => {
@@ -53,7 +56,7 @@ export default class Finder extends React.Component {
   };
 
   findPrev = () => {
-    this.webview.findInPage(this.state.searchTxt, {forward: false});
+    this.webview.findInPage(this.state.searchTxt, {forward: false, findNext: true});
   }
 
   searchTxt = (event) => {
@@ -77,6 +80,15 @@ export default class Finder extends React.Component {
     });
   }
 
+  inputFocus = (e) => {
+    e.stopPropagation();
+    this.props.inputFocus(e, true);
+  }
+
+  inputBlur = (e) => {
+    this.props.inputFocus(e, false);
+  }
+
   render() {
     return (
       <div id='finder'>
@@ -87,7 +99,8 @@ export default class Finder extends React.Component {
               placeholder=''
               value={this.state.searchTxt}
               onChange={this.searchTxt}
-              onBlur={this.props.inputBlur}
+              onBlur={this.inputBlur}
+              onClick={this.inputFocus}
               ref={(input) => {
                 this.searchInput = input;
               }}
@@ -172,5 +185,5 @@ Finder.propTypes = {
   close: PropTypes.func,
   webviewKey: PropTypes.number,
   focusState: PropTypes.bool,
-  inputBlur: PropTypes.func,
+  inputFocus: PropTypes.func,
 };

src/browser/components/MainPage.jsx

@@ -58,6 +58,8 @@ export default class MainPage extends React.Component {
       certificateRequests: [],
       maximized: false,
       showNewTeamModal: false,
+      focusFinder: false,
+      finderVisible: false,
     };
   }
 
@@ -174,25 +176,11 @@ export default class MainPage extends React.Component {
     });
     ipcRenderer.on('download-complete', this.showDownloadCompleteNotification);
 
-    function focusListener() {
-      if (self.state.showNewTeamModal && self.inputRef) {
-        self.inputRef.current().focus();
-      } else {
-        self.handleOnTeamFocused(self.state.key);
-        self.refs[`mattermostView${self.state.key}`].focusOnWebView();
-      }
-      self.setState({unfocused: false});
-    }
-
-    function blurListener() {
-      self.setState({unfocused: true});
-    }
-
     const currentWindow = remote.getCurrentWindow();
-    currentWindow.on('focus', focusListener);
-    currentWindow.on('blur', blurListener);
+    currentWindow.on('focus', self.focusListener);
+    currentWindow.on('blur', self.blurListener);
     window.addEventListener('beforeunload', () => {
-      currentWindow.removeListener('focus', focusListener);
+      currentWindow.removeListener('focus', self.focusListener);
     });
 
     if (currentWindow.isMaximized()) {
@@ -209,7 +197,7 @@ export default class MainPage extends React.Component {
 
     // https://github.com/mattermost/desktop/pull/371#issuecomment-263072803
     currentWindow.webContents.on('devtools-closed', () => {
-      focusListener();
+      self.focusListener();
     });
 
     ipcRenderer.on('open-devtool', () => {
@@ -358,6 +346,19 @@ export default class MainPage extends React.Component {
     }
   }
 
+  focusListener = () => {
+    if (this.state.showNewTeamModal && this.inputRef) {
+      this.inputRef.current().focus();
+    } else if (!(this.state.finderVisible && this.state.focusFinder)) {
+      this.handleOnTeamFocused(this.state.key);
+      this.refs[`mattermostView${this.state.key}`].focusOnWebView();
+    }
+    this.setState({unfocused: false});
+  }
+
+  blurListener = () => {
+    this.setState({unfocused: true});
+  }
   loginRequest = (event, request, authInfo) => {
     const loginQueue = this.state.loginQueue;
     loginQueue.push({
@@ -588,12 +589,13 @@ export default class MainPage extends React.Component {
   closeFinder = () => {
     this.setState({
       finderVisible: false,
+      focusFinder: false,
     });
   }
 
-  inputBlur = () => {
+  inputFocus = (e, focus) => {
     this.setState({
-      focusFinder: false,
+      focusFinder: focus,
     });
   }
 
@@ -854,7 +856,7 @@ export default class MainPage extends React.Component {
               webviewKey={this.state.key}
               close={this.closeFinder}
               focusState={this.state.focusFinder}
-              inputBlur={this.inputBlur}
+              inputFocus={this.inputFocus}
             />
           ) : null}
         </Grid>

src/browser/css/components/Finder.css

@@ -1,3 +1,22 @@
+.finder {
+  position: fixed;
+  top: 0px;
+  right: 200px;
+  padding: 4px;
+  background: #eee;
+  border: 1px solid #d7d7d7;
+  border-top: none;
+  border-right: none;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  font-size: 0px;
+  -webkit-app-region: no-drag;
+}
+
+.finder.macOS {
+  right: 20px;
+}
+
 .finder-input-wrapper {
   display: inline-block;
   position: relative;
@@ -6,14 +25,13 @@
 
 .finder button {
   border: none;
-  background: #d2d2d2;
+  background: #f0f0f0;
   outline: none;
-  font-size: 18px;
   height: 26px;
 }
 
 .finder button:hover {
-  background: #f0f0f0;
+  background: #d2d2d2;
 }
 
 .finder-input {
@@ -50,8 +68,7 @@
 }
 
 .finder .finder-close {
-    background: transparent;
-    border: none;
+    border-radius: 3px;
 }
 
 .finder-next {
@@ -59,3 +76,9 @@
     border-bottom-right-radius: 3px;
     margin-right: 2px;
 }
+
+.finder-prev {
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+  margin-left: 2px;
+}

src/browser/css/components/MainPage.css

@@ -11,22 +11,3 @@
 div[id*="-permissionDialog"] {
   max-width: 350px;
 }
-
-.finder {
-  position: fixed;
-  top: 0;
-  right: 200px;
-  padding: 4px;
-  background: #eee;
-  border: 1px solid #d7d7d7;
-  border-top: none;
-  border-right: none;
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-  font-size: 0px;
-  -webkit-app-region: no-drag;
-}
-
-.finder.macOS {
-  right: 20px;
-}