From: Moriel Schottlender <moriel@gmail.com>
Date: Thu, 23 Feb 2017 21:52:49 +0000 (-0800)
Subject: RCFilters UI: Stop mousedown propagation when capsule item 'x' button is clicked
X-Git-Tag: 1.31.0-rc.0~3994^2
X-Git-Url: http://git.cyclocoop.org/%22.htmlspecialchars%28%24url_syndic%29.%22?a=commitdiff_plain;h=76825c5334c65a705638591094b781506bf26914;p=lhc%2Fweb%2Fwiklou.git

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
---

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
 	 */