From bbd343f414fec4cd1035d053c49556cf048175a3 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Thu, 27 Aug 2020 14:17:55 -0600
Subject: [PATCH 1/2] Fix clicking the background of the tag panel not clearing
 the filter

Fixes https://github.com/vector-im/element-web/issues/12988
---
 src/components/structures/TagPanel.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/structures/TagPanel.js b/src/components/structures/TagPanel.js
index 4acbc49d4d..40b5d04a0a 100644
--- a/src/components/structures/TagPanel.js
+++ b/src/components/structures/TagPanel.js
@@ -164,7 +164,7 @@ const TagPanel = createReactClass({
             );
         }
 
-        return <div className={classes}>
+        return <div className={classes} onClick={this.onClearFilterClick}>
             <div className="mx_TagPanel_clearButton_container">
                 { clearButton }
             </div>

From 3c176f762ed9d20f8ffe6529ce23c5a200451308 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Thu, 27 Aug 2020 14:26:55 -0600
Subject: [PATCH 2/2] Remove disabled clear button from tag panel + dead code

---
 res/css/structures/_TagPanel.scss     | 19 -------------------
 src/components/structures/TagPanel.js | 21 ---------------------
 2 files changed, 40 deletions(-)

diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss
index 2683a32dae..0c8857e1ef 100644
--- a/res/css/structures/_TagPanel.scss
+++ b/res/css/structures/_TagPanel.scss
@@ -30,25 +30,6 @@ limitations under the License.
     cursor: pointer;
 }
 
-.mx_TagPanel .mx_TagPanel_clearButton_container {
-    /* Constant height within flex mx_TagPanel */
-    height: 70px;
-    width: 56px;
-
-    flex: none;
-
-    justify-content: center;
-    align-items: flex-start;
-
-    display: none;
-}
-
-.mx_TagPanel .mx_TagPanel_clearButton object {
-    /* Same as .mx_SearchBox padding-top */
-    margin-top: 24px;
-    pointer-events: none;
-}
-
 .mx_TagPanel .mx_TagPanel_divider {
     height: 0px;
     width: 90%;
diff --git a/src/components/structures/TagPanel.js b/src/components/structures/TagPanel.js
index 40b5d04a0a..a714b126ec 100644
--- a/src/components/structures/TagPanel.js
+++ b/src/components/structures/TagPanel.js
@@ -95,11 +95,6 @@ const TagPanel = createReactClass({
         }
     },
 
-    onCreateGroupClick(ev) {
-        ev.stopPropagation();
-        dis.dispatch({action: 'view_create_group'});
-    },
-
     onClearFilterClick(ev) {
         dis.dispatch({action: 'deselect_tags'});
     },
@@ -117,9 +112,7 @@ const TagPanel = createReactClass({
 
     render() {
         const DNDTagTile = sdk.getComponent('elements.DNDTagTile');
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const ActionButton = sdk.getComponent('elements.ActionButton');
-        const TintableSvg = sdk.getComponent('elements.TintableSvg');
 
         const tags = this.state.orderedTags.map((tag, index) => {
             return <DNDTagTile
@@ -131,17 +124,6 @@ const TagPanel = createReactClass({
         });
 
         const itemsSelected = this.state.selectedTags.length > 0;
-
-        let clearButton;
-        if (itemsSelected) {
-            clearButton = <AccessibleButton className="mx_TagPanel_clearButton" onClick={this.onClearFilterClick}>
-                <TintableSvg src={require("../../../res/img/icons-close.svg")} width="24" height="24"
-                             alt={_t("Clear filter")}
-                             title={_t("Clear filter")}
-                />
-            </AccessibleButton>;
-        }
-
         const classes = classNames('mx_TagPanel', {
             mx_TagPanel_items_selected: itemsSelected,
         });
@@ -165,9 +147,6 @@ const TagPanel = createReactClass({
         }
 
         return <div className={classes} onClick={this.onClearFilterClick}>
-            <div className="mx_TagPanel_clearButton_container">
-                { clearButton }
-            </div>
             <AutoHideScrollbar
                 className="mx_TagPanel_scroller"
                 // XXX: Use onMouseDown as a workaround for https://github.com/atlassian/react-beautiful-dnd/issues/273