From da98080859dc3e2f8231838f70054bd33763b233 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 10 Sep 2019 10:57:25 +0200
Subject: [PATCH] hide explore button when focusing filter field

---
 res/css/structures/_LeftPanel.scss     |  5 +++++
 src/components/structures/LeftPanel.js | 13 +++++++++++++
 src/components/structures/SearchBox.js | 10 ++++++++++
 3 files changed, 28 insertions(+)

diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index e01dfb75cd..c2b8a6873f 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -138,8 +138,13 @@ limitations under the License.
 .mx_LeftPanel_explore {
     flex: 0 0 40%;
     overflow: hidden;
+    transition: flex-basis 0.2s;
     box-sizing: border-box;
 
+    &.mx_LeftPanel_explore_hidden {
+        flex-basis: 0;
+    }
+
     .mx_AccessibleButton {
         font-size: 14px;
         margin: 9px;
diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
index ab1190d8b9..b77b5e2e39 100644
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -81,6 +81,9 @@ const LeftPanel = createReactClass({
         if (this.state.searchFilter !== nextState.searchFilter) {
             return true;
         }
+        if (this.state.searchFocused !== nextState.searchFocused) {
+            return true;
+        }
 
         return false;
     },
@@ -209,6 +212,14 @@ const LeftPanel = createReactClass({
         this._roomList = ref;
     },
 
+    _onSearchFocus: function() {
+        this.setState({searchFocused: true});
+    },
+
+    _onSearchBlur: function() {
+        this.setState({searchFocused: false});
+    },
+
     render: function() {
         const RoomList = sdk.getComponent('rooms.RoomList');
         const RoomBreadcrumbs = sdk.getComponent('rooms.RoomBreadcrumbs');
@@ -255,6 +266,8 @@ const LeftPanel = createReactClass({
             placeholder={ _t('Filter room names') }
             onSearch={ this.onSearch }
             onCleared={ this.onSearchCleared }
+            onFocus={this._onSearchFocus}
+            onBlur={this._onSearchBlur}
             collapsed={this.props.collapsed} />);
 
         let breadcrumbs;
diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js
index d8ff08adbf..70e898fe04 100644
--- a/src/components/structures/SearchBox.js
+++ b/src/components/structures/SearchBox.js
@@ -95,6 +95,15 @@ module.exports = createReactClass({
 
     _onFocus: function(ev) {
         ev.target.select();
+        if (this.props.onFocus) {
+            this.props.onFocus(ev);
+        }
+    },
+
+    _onBlur: function(ev) {
+        if (this.props.onBlur) {
+            this.props.onBlur(ev);
+        }
     },
 
     _clearSearch: function(source) {
@@ -132,6 +141,7 @@ module.exports = createReactClass({
                     onChange={ this.onChange }
                     onKeyDown={ this._onKeyDown }
                     placeholder={ this.props.placeholder }
+                    onBlur={this._onBlur}
                 />
                 { clearButton }
             </div>