Workaround for atlassian/react-beautiful-dnd#273

Fix two bugs in Riot due to a single bug in react-b-dnd Fixes element-hq/element-web#6253 Fixes element-hq/element-web#6156
matrix-org · Mar 1, 2018 · 64332b3 · 64332b3
1 parent 1ac62a1
commit 64332b3
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git 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
@@ -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}>