From: Roan Kattouw <roan.kattouw@gmail.com>
Date: Fri, 9 Jun 2017 02:13:45 +0000 (-0700)
Subject: UsersMultiSelectWidget: Port from CapsuleMultiselectWidget to MenuTagMultiselectWidget
X-Git-Tag: 1.31.0-rc.0~2834^2
X-Git-Url: https://git.heureux-cyclage.org/?p=lhc%2Fweb%2Fwiklou.git;a=commitdiff_plain;h=ef51ede976c7069e014525c3846a5e8bee81ab9e

UsersMultiSelectWidget: Port from CapsuleMultiselectWidget to MenuTagMultiselectWidget

Bonus:
* Remove puzzling code that claimed to fix a bug that I couldn't reproduce
  but instead made single-character searches never display suggestions
* Clear the input after choosing a menu item

Change-Id: I44e72205880d152639ee823238dc5ab84d34402b
---

diff --git a/includes/widget/UsersMultiselectWidget.php b/includes/widget/UsersMultiselectWidget.php
index d24ab7bf66..999cb6ab32 100644
--- a/includes/widget/UsersMultiselectWidget.php
+++ b/includes/widget/UsersMultiselectWidget.php
@@ -53,7 +53,7 @@ class UsersMultiselectWidget extends \OOUI\Widget {
 
 	public function getConfig( &$config ) {
 		if ( $this->usersArray !== null ) {
-			$config['data'] = $this->usersArray;
+			$config['selected'] = $this->usersArray;
 		}
 		if ( $this->inputName !== null ) {
 			$config['name'] = $this->inputName;
diff --git a/resources/src/mediawiki.widgets/mw.widgets.UsersMultiselectWidget.js b/resources/src/mediawiki.widgets/mw.widgets.UsersMultiselectWidget.js
index d7464b9a86..832cb2b6da 100644
--- a/resources/src/mediawiki.widgets/mw.widgets.UsersMultiselectWidget.js
+++ b/resources/src/mediawiki.widgets/mw.widgets.UsersMultiselectWidget.js
@@ -14,7 +14,7 @@
 	 * newline-separated usernames.
 	 *
 	 * @class
-	 * @extends OO.ui.CapsuleMultiselectWidget
+	 * @extends OO.ui.MenuTagMultiselectWidget
 	 *
 	 * @constructor
 	 * @param {Object} [config] Configuration options
@@ -56,17 +56,9 @@
 		this.menu = this.getMenu();
 
 		// Events
-		// Update contents of autocomplete menu as user types letters
-		this.$input.on( {
-			keyup: this.updateMenuItems.bind( this )
-		} );
-		// When option is selected from autocomplete menu, update the menu
-		this.menu.connect( this, {
-			select: 'updateMenuItems'
-		} );
 		// When list of selected usernames changes, update hidden input
 		this.connect( this, {
-			change: 'updateHiddenInput'
+			change: 'onMultiselectChange'
 		} );
 
 		// API init
@@ -75,7 +67,7 @@
 
 	/* Setup */
 
-	OO.inheritClass( mw.widgets.UsersMultiselectWidget, OO.ui.CapsuleMultiselectWidget );
+	OO.inheritClass( mw.widgets.UsersMultiselectWidget, OO.ui.MenuTagMultiselectWidget );
 	OO.mixinClass( mw.widgets.UsersMultiselectWidget, OO.ui.mixin.PendingElement );
 
 	/* Methods */
@@ -83,10 +75,10 @@
 	/**
 	 * Get currently selected usernames
 	 *
-	 * @return {Array} usernames
+	 * @return {string[]} usernames
 	 */
 	mw.widgets.UsersMultiselectWidget.prototype.getSelectedUsernames = function () {
-		return this.getItemsData();
+		return this.getValue();
 	};
 
 	/**
@@ -95,7 +87,7 @@
 	 * @private
 	 */
 	mw.widgets.UsersMultiselectWidget.prototype.updateMenuItems = function () {
-		var inputValue = this.$input.val();
+		var inputValue = this.input.getValue();
 
 		if ( inputValue === this.inputValue ) {
 			// Do not restart api query if nothing has changed in the input
@@ -134,12 +126,9 @@
 
 				// Remove all items from menu add fill it with new
 				this.menu.clearItems();
-
-				// Additional check to prevent bug of autoinserting first suggestion
-				// while removing user from the list
-				if ( inputValue.length > 1 || suggestions.length > 1 ) {
-					this.menu.addItems( suggestions );
-				}
+				this.menu.addItems( suggestions );
+				// Make the menu visible; it might not be if it was previously empty
+				this.menu.toggle( true );
 
 				this.popPending();
 			}.bind( this ) ).fail( this.popPending.bind( this ) );
@@ -148,6 +137,12 @@
 		}
 	};
 
+	mw.widgets.UsersMultiselectWidget.prototype.onInputChange = function () {
+		mw.widgets.UsersMultiselectWidget.parent.prototype.onInputChange.apply( this, arguments );
+
+		this.updateMenuItems();
+	};
+
 	/**
 	 * If used inside HTML form, then update hiddenInput with list o
 	 * newline-separated usernames.
@@ -160,4 +155,14 @@
 		}
 	};
 
+	/**
+	 * React to the 'change' event.
+	 *
+	 * Updates the hidden input and clears the text from the text box.
+	 */
+	mw.widgets.UsersMultiselectWidget.prototype.onMultiselectChange = function () {
+		this.updateHiddenInput();
+		this.input.setValue( '' );
+	};
+
 }( jQuery, mediaWiki ) );