* @copyright 2017 MediaWiki Widgets Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
-( function ( $, mw ) {
+( function () {
/**
* UsersMultiselectWidget can be used to input list of users in a single
* newline-separated usernames.
*
* @class
- * @extends OO.ui.CapsuleMultiselectWidget
+ * @extends OO.ui.MenuTagMultiselectWidget
*
* @constructor
* @param {Object} [config] Configuration options
this.limit = config.limit;
if ( 'name' in config ) {
- // If used inside HTML form, then create hidden input, which will store
- // the results.
- this.hiddenInput = $( '<input>' )
- .attr( 'type', 'hidden' )
+ // Use this instead of <input type="hidden">, because hidden inputs do not have separate
+ // 'value' and 'defaultValue' properties. The script on Special:Preferences
+ // (mw.special.preferences.confirmClose) checks this property to see if a field was changed.
+ this.hiddenInput = $( '<textarea>' )
+ .addClass( 'oo-ui-element-hidden' )
.attr( 'name', config.name )
.appendTo( this.$element );
-
// Update with preset values
this.updateHiddenInput();
+ // Set the default value (it might be different from just being empty)
+ this.hiddenInput.prop( 'defaultValue', this.getSelectedUsernames().join( '\n' ) );
}
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
/* 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 */
/**
* Get currently selected usernames
*
- * @return {Array} usernames
+ * @return {string[]} usernames
*/
mw.widgets.UsersMultiselectWidget.prototype.getSelectedUsernames = function () {
- return this.getItemsData();
+ return this.getValue();
};
/**
* @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
// 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 ) );
}
};
+ 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.
mw.widgets.UsersMultiselectWidget.prototype.updateHiddenInput = function () {
if ( 'hiddenInput' in this ) {
this.hiddenInput.val( this.getSelectedUsernames().join( '\n' ) );
+ // Trigger a 'change' event as if a user edited the text
+ // (it is not triggered when changing the value from JS code).
+ this.hiddenInput.trigger( 'change' );
}
};
-}( jQuery, mediaWiki ) );
+ /**
+ * 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( '' );
+ };
+
+}() );