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 d24ab7b..999cb6a 100644 (file)
--- 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 d7464b9..832cb2b 100644 (file)
--- 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 ) );