RCFilters UI: Destroy CapsuleItemWidget when it is removed

The widget is recreated when an item is reinserted, so we should
clean up the external elements it creates (like the popup) and
disconnect from events.

Bug: T157852
Change-Id: I8e6eaac7b1a3062d156d4c0b5b912d1a6bfae7de

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 525f718..40d31c5 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js
@@ -107,4 +107,16 @@
        mw.rcfilters.ui.CapsuleItemWidget.prototype.onCapsuleRemovedByUser = function () {
                this.controller.updateFilter( this.model.getName(), false );
        };
+
+       /**
+        * Remove and destroy external elements of this widget
+        */
+       mw.rcfilters.ui.CapsuleItemWidget.prototype.destroy = function () {
+               // Destroy the popup
+               this.popup.$element.detach();
+
+               // Disconnect events
+               this.model.disconnect( this );
+               this.closeButton.disconnect( this );
+       };
 }( mediaWiki, jQuery ) );

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
index 56303d5..9bb1a98 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
@@ -230,4 +230,21 @@
                this.menu.selectItem();
                this.menu.highlightItem();
        };
+
+       /**
+        * @inheritdoc
+        */
+       mw.rcfilters.ui.FilterCapsuleMultiselectWidget.prototype.removeItems = function ( items ) {
+               // Parent call
+               mw.rcfilters.ui.FilterCapsuleMultiselectWidget.parent.prototype.removeItems.call( this, items );
+
+               // Destroy the item widget when it is removed
+               // This is done because we re-add items by recreating them, rather than hiding them
+               // and items include popups, that will just continue to be created and appended
+               // unnecessarily.
+               items.forEach( function ( widget ) {
+                       widget.destroy();
+               } );
+       };
+
 }( mediaWiki, jQuery ) );