hide explore button when focusing filter field

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;

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;

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>