diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js index 0c4688a411..180a348434 100644 --- a/src/components/structures/LoggedInView.js +++ b/src/components/structures/LoggedInView.js @@ -319,7 +319,7 @@ const LoggedInView = React.createClass({ ), true); }, - _onClick: function(ev) { + _onMouseDown: function(ev) { // When the panels are disabled, clicking on them results in a mouse event // which bubbles to certain elements in the tree. When this happens, close // any settings page that is currently open (user/room/group). @@ -330,11 +330,37 @@ const LoggedInView = React.createClass({ targetClasses.has('mx_MatrixChat_middlePanel') || targetClasses.has('mx_RoomView') ) { - dis.dispatch({ action: 'close_settings' }); + this.setState({ + mouseDown: { + x: ev.pageX, + y: ev.pageY, + }, + }); } } }, + _onMouseUp: function(ev) { + if (!this.state.mouseDown) return; + + const deltaX = ev.pageX - this.state.mouseDown.x; + const deltaY = ev.pageY - this.state.mouseDown.y; + const distance = Math.sqrt((deltaX * deltaX) + (deltaY + deltaY)); + const maxRadius = 5; // People shouldn't be straying too far, hopefully + + // Note: we track how far the user moved their mouse to help + // combat against https://github.com/vector-im/riot-web/issues/7158 + + if (distance < maxRadius) { + // This is probably a real click, and not a drag + dis.dispatch({ action: 'close_settings' }); + } + + // Always clear the mouseDown state to ensure we don't accidentally + // use stale values due to the mouseDown checks. + this.setState({mouseDown: null}); + }, + render: function() { const LeftPanel = sdk.getComponent('structures.LeftPanel'); const RightPanel = sdk.getComponent('structures.RightPanel'); @@ -478,7 +504,7 @@ const LoggedInView = React.createClass({ } return ( -
+
{ topBar }