diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
index 489e9bd243a..cb374a02a31 100644
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -199,9 +199,10 @@ const LeftPanel = React.createClass({
             },
         );
 
-        const searchBox = !this.props.collapsed ?
-            <SearchBox onSearch={ this.onSearch } onCleared={ this.onSearchCleared } /> :
-            undefined;
+        const searchBox = (<SearchBox
+            onSearch={ this.onSearch }
+            onCleared={ this.onSearchCleared }
+            collapsed={this.props.collapsed} />);
 
         return (
             <div className={containerClasses}>
diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js
index ea1fa312c1e..5792b2904c8 100644
--- a/src/components/structures/SearchBox.js
+++ b/src/components/structures/SearchBox.js
@@ -95,8 +95,13 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        const TintableSvg = sdk.getComponent('elements.TintableSvg');
-
+        // check for collapsed here and
+        // not at parent so we keep
+        // searchTerm in our state
+        // when collapsing and expanding
+        if (this.props.collapsed) {
+            return null;
+        }
         const clearButton = this.state.searchTerm.length > 0 ?
             (<AccessibleButton key="button"
                     className="mx_SearchBox_closeButton"