From 76825c5334c65a705638591094b781506bf26914 Mon Sep 17 00:00:00 2001
From: Moriel Schottlender <moriel@gmail.com>
Date: Thu, 23 Feb 2017 13:52:49 -0800
Subject: [PATCH] RCFilters UI: Stop mousedown propagation when capsule item
 'x' button is clicked

We don't want the parent (the CapsuleMultiselectWidget) to receieve
the mousedown event, because it then uses it to focus and open the
popup.

Bug: T158006
Change-Id: I1ae9b58b723a70cc150392224196bdb67ebf30b4
---
 .../ui/mw.rcfilters.ui.CapsuleItemWidget.js   | 36 ++++++++++++++-----
 1 file changed, 27 insertions(+), 9 deletions(-)

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js
index a547020ce6..8c5bd82b58 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js
@@ -51,7 +51,7 @@
 		// Events
 		this.model.connect( this, { update: 'onModelUpdate' } );
 
-		this.closeButton.connect( this, { click: 'onCapsuleRemovedByUser' } );
+		this.closeButton.$element.on( 'mousedown', this.onCloseButtonMouseDown.bind( this ) );
 
 		// Initialization
 		this.$overlay.append( this.popup.$element );
@@ -78,6 +78,32 @@
 		this.setHighlightColor();
 	};
 
+	/**
+	 * Override mousedown event to prevent its propagation to the parent,
+	 * since the parent (the multiselect widget) focuses the popup when its
+	 * mousedown event is fired.
+	 *
+	 * @param {jQuery.Event} e Event
+	 */
+	mw.rcfilters.ui.CapsuleItemWidget.prototype.onCloseButtonMouseDown = function ( e ) {
+		e.stopPropagation();
+	};
+
+	/**
+	 * Override the event listening to the item close button click
+	 */
+	mw.rcfilters.ui.CapsuleItemWidget.prototype.onCloseClick = function () {
+		var element = this.getElementGroup();
+
+		if ( element && $.isFunction( element.removeItems ) ) {
+			element.removeItems( [ this ] );
+		}
+
+		// Respond to user removing the filter
+		this.controller.updateFilter( this.model.getName(), false );
+		this.controller.clearHighlightColor( this.model.getName() );
+	};
+
 	mw.rcfilters.ui.CapsuleItemWidget.prototype.setHighlightColor = function () {
 		var selectedColor = this.model.isHighlightEnabled() ? this.model.getHighlightColor() : null;
 
@@ -120,14 +146,6 @@
 		}
 	};
 
-	/**
-	 * Respond to the user removing the capsule with the close button
-	 */
-	mw.rcfilters.ui.CapsuleItemWidget.prototype.onCapsuleRemovedByUser = function () {
-		this.controller.updateFilter( this.model.getName(), false );
-		this.controller.clearHighlightColor( this.model.getName() );
-	};
-
 	/**
 	 * Remove and destroy external elements of this widget
 	 */
-- 
2.20.1