From 4067f91ad5fab793caba0b602c218384ec8a481a Mon Sep 17 00:00:00 2001
From: Moriel Schottlender <moriel@gmail.com>
Date: Mon, 17 Apr 2017 16:45:54 -0700
Subject: [PATCH] RCFilters UI: Select tag when filter item is selected

Retain the selection behavior from previous versions, and synchronize
the selection of the filter item in the menu with the tag items
in the MenuTagMultiselectWidget.

Bug: T163138
Change-Id: I548a1fca65372c697e24b77d928d56b18f4df1c5
---
 .../ui/mw.rcfilters.ui.FilterTagItemWidget.js | 10 +++++++++
 ...rcfilters.ui.FilterTagMultiselectWidget.js | 22 +++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagItemWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagItemWidget.js
index cfffc65de2..f79e013228 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagItemWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagItemWidget.js
@@ -18,6 +18,7 @@
 
 		this.controller = controller;
 		this.model = model;
+		this.selected = false;
 
 		mw.rcfilters.ui.FilterTagItemWidget.parent.call( this, $.extend( {
 			data: this.model.getName(),
@@ -161,6 +162,15 @@
 		}
 	};
 
+	/**
+	 * Get the selected state of this widget
+	 *
+	 * @return {boolean} Tag is selected
+	 */
+	mw.rcfilters.ui.FilterTagItemWidget.prototype.isSelected = function () {
+		return this.selected;
+	};
+
 	/**
 	 * Get item name
 	 *
diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
index 8e26271cfd..6fd3585c12 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
@@ -137,6 +137,7 @@
 		} else {
 			// Clear selection
 			this.getMenu().selectItem( null );
+			this.selectTag( null );
 		}
 	};
 
@@ -207,6 +208,9 @@
 	mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onMenuChoose = function ( item ) {
 		this.controller.toggleFilterSelect( item.model.getName() );
 
+		// Select the tag if it exists, or reset selection otherwise
+		this.selectTag( this.getItemFromData( item.model.getName() ) );
+
 		this.focus();
 	};
 
@@ -248,6 +252,7 @@
 		mw.rcfilters.ui.FilterTagMultiselectWidget.parent.prototype.onTagSelect.call( this, tagItem );
 
 		this.menu.selectItem( menuOption );
+		this.selectTag( tagItem );
 
 		// Scroll to the item
 		if ( oldInputValue ) {
@@ -264,6 +269,23 @@
 		}
 	};
 
+	/**
+	 * Select a tag by reference. This is what OO.ui.SelectWidget is doing.
+	 * If no items are given, reset selection from all.
+	 *
+	 * @param {mw.rcfilters.ui.FilterTagItemWidget} [item] Tag to select,
+	 *  omit to deselect all
+	 */
+	mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.selectTag = function ( item ) {
+		var i, len, selected;
+
+		for ( i = 0, len = this.items.length; i < len; i++ ) {
+			selected = this.items[ i ] === item;
+			if ( this.items[ i ].isSelected() !== selected ) {
+				this.items[ i ].toggleSelected( selected );
+			}
+		}
+	};
 	/**
 	 * @inheritdoc
 	 */
-- 
2.20.1