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 a547020..8c5bd82 100644 (file)
--- 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
         */