Replace `<input type="hidden">` with a `<textarea>` hidden using
`display: none`, because the former does not have separate 'value'
and 'defaultValue' properties, and the Special:Preferences script to
enable/disable the "Save" button depends on them to work correctly.
We use a similar approach in OOUI (RadioSelectInputWidget).
Also correct a code comment (we need to trigger a 'change' event for
any kind of input, not just `<input type="hidden">`).
Bug: T192147
Change-Id: I2351bc752f9cf25a607f4b197c132062d52ecb1e
this.limit = config.limit;
if ( 'name' in config ) {
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 );
.attr( 'name', config.name )
.appendTo( this.$element );
// Update with preset values
this.updateHiddenInput();
// 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();
}
this.menu = this.getMenu();
mw.widgets.UsersMultiselectWidget.prototype.updateHiddenInput = function () {
if ( 'hiddenInput' in this ) {
this.hiddenInput.val( this.getSelectedUsernames().join( '\n' ) );
mw.widgets.UsersMultiselectWidget.prototype.updateHiddenInput = function () {
if ( 'hiddenInput' in this ) {
this.hiddenInput.val( this.getSelectedUsernames().join( '\n' ) );
- // Hidden inputs do not trigger onChange.
- // @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden
+ // 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' );
}
};
this.hiddenInput.trigger( 'change' );
}
};