From 64332b302178abce5163c36205046f8e62047127 Mon Sep 17 00:00:00 2001
From: Luke Barnard <luke@matrix.org>
Date: Wed, 28 Feb 2018 18:31:45 +0000
Subject: [PATCH] Workaround for atlassian/react-beautiful-dnd#273

Fix two bugs in Riot due to a single bug in react-b-dnd

Fixes vector-im/riot-web#6253
Fixes vector-im/riot-web#6156
---
 src/components/structures/TagPanel.js    | 6 ++++--
 src/components/views/groups/GroupTile.js | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/structures/TagPanel.js b/src/components/structures/TagPanel.js
index 3d76a967a2e..8db2a12affc 100644
--- a/src/components/structures/TagPanel.js
+++ b/src/components/structures/TagPanel.js
@@ -84,7 +84,7 @@ const TagPanel = React.createClass({
         }
     },
 
-    onClick(e) {
+    onMouseDown(e) {
         dis.dispatch({action: 'deselect_tags'});
     },
 
@@ -128,7 +128,9 @@ const TagPanel = React.createClass({
             <GeminiScrollbar
                 className="mx_TagPanel_scroller"
                 autoshow={true}
-                onClick={this.onClick}
+                // XXX: Use onMouseDown as a workaround for https://github.com/atlassian/react-beautiful-dnd/issues/273
+                // instead of onClick. Otherwise we experience https://github.com/vector-im/riot-web/issues/6253
+                onMouseDown={this.onMouseDown}
             >
                 <Droppable
                     droppableId="tag-panel-droppable"
diff --git a/src/components/views/groups/GroupTile.js b/src/components/views/groups/GroupTile.js
index f1dbb759885..8794fe4f362 100644
--- a/src/components/views/groups/GroupTile.js
+++ b/src/components/views/groups/GroupTile.js
@@ -59,7 +59,7 @@ const GroupTile = React.createClass({
         });
     },
 
-    onClick: function(e) {
+    onMouseDown: function(e) {
         e.preventDefault();
         dis.dispatch({
             action: 'view_group',
@@ -79,7 +79,9 @@ const GroupTile = React.createClass({
         const httpUrl = profile.avatarUrl ? this.context.matrixClient.mxcUrlToHttp(
             profile.avatarUrl, avatarHeight, avatarHeight, "crop",
         ) : null;
-        return <AccessibleButton className="mx_GroupTile" onClick={this.onClick}>
+        // XXX: Use onMouseDown as a workaround for https://github.com/atlassian/react-beautiful-dnd/issues/273
+        // instead of onClick. Otherwise we experience https://github.com/vector-im/riot-web/issues/6156
+        return <AccessibleButton className="mx_GroupTile" onMouseDown={this.onMouseDown}>
             <Droppable droppableId="my-groups-droppable" type="draggable-TagTile">
                 { (droppableProvided, droppableSnapshot) => (
                     <div ref={droppableProvided.innerRef}>