Alters the SelectWithInput to allow a required config to be passed from a
parent widget. Also handles the required state dynamically. If the widget is
an OR widget, then only the select dropdown is required. The text input will
be required when the other option is selected. If the widget is an AND widget
then both the select dropdown and the text input will be required.
Bug: T220533
Change-Id: I8479743126756f2b1bd7bcd53b100a0134f34d07
'textinput' => $textAttribs,
'dropdowninput' => $dropdownInputAttribs,
'or' => false,
'textinput' => $textAttribs,
'dropdowninput' => $dropdownInputAttribs,
'or' => false,
+ 'required' => $this->mParams[ 'required' ] ?? false,
'classes' => [ 'mw-htmlform-select-and-other-field' ],
'data' => [
'maxlengthUnit' => $this->mParams['maxlength-unit'] ?? 'bytes'
'classes' => [ 'mw-htmlform-select-and-other-field' ],
'data' => [
'maxlengthUnit' => $this->mParams['maxlength-unit'] ?? 'bytes'
'disabled' => $disabled,
'textinput' => $textAttribs,
'dropdowninput' => $dropdownAttribs,
'disabled' => $disabled,
'textinput' => $textAttribs,
'dropdowninput' => $dropdownAttribs,
+ 'required' => $this->mParams[ 'required' ] ?? false,
* - array $config['dropdowninput'] Configuration for the DropdownInputWidget
* - bool $config['or'] Configuration for whether the widget is dropdown AND input
* or dropdown OR input
* - array $config['dropdowninput'] Configuration for the DropdownInputWidget
* - bool $config['or'] Configuration for whether the widget is dropdown AND input
* or dropdown OR input
+ * - bool $config['required'] Configuration for whether the widget is a required input.
*/
public function __construct( array $config = [] ) {
// Configuration initialization
*/
public function __construct( array $config = [] ) {
// Configuration initialization
[
'textinput' => [],
'dropdowninput' => [],
[
'textinput' => [],
'dropdowninput' => [],
+ 'or' => false,
+ 'required' => false,
$config['dropdowninput']['disabled'] = true;
}
$config['dropdowninput']['disabled'] = true;
}
+ $config['textinput']['required'] = $config['or'] ? false : $config['required'];
+ $config['dropdowninput']['required'] = $config['required'];
+
parent::__construct( $config );
// Properties
parent::__construct( $config );
// Properties
$config['dropdowninput'] = $this->config['dropdowninput'];
$config['dropdowninput']['dropdown']['$overlay'] = true;
$config['or'] = $this->config['or'];
$config['dropdowninput'] = $this->config['dropdowninput'];
$config['dropdowninput']['dropdown']['$overlay'] = true;
$config['or'] = $this->config['or'];
+ $config['required'] = $this->config['required'];
return parent::getConfig( $config );
}
}
return parent::getConfig( $config );
}
}
* @cfg {Object} [textinput] Config for the text input
* @cfg {boolean} [or=false] Config for whether the widget is dropdown AND input
* or dropdown OR input
* @cfg {Object} [textinput] Config for the text input
* @cfg {boolean} [or=false] Config for whether the widget is dropdown AND input
* or dropdown OR input
+ * @cfg {boolean} [required=false] Config for whether input is required
*/
mw.widgets.SelectWithInputWidget = function MwWidgetsSelectWithInputWidget( config ) {
// Config initialization
*/
mw.widgets.SelectWithInputWidget = function MwWidgetsSelectWithInputWidget( config ) {
// Config initialization
- config = $.extend( { or: false }, config );
+ config = $.extend( { or: false, required: false }, config );
// Properties
this.textinput = new OO.ui.TextInputWidget( config.textinput );
this.dropdowninput = new OO.ui.DropdownInputWidget( config.dropdowninput );
this.or = config.or;
// Properties
this.textinput = new OO.ui.TextInputWidget( config.textinput );
this.dropdowninput = new OO.ui.DropdownInputWidget( config.dropdowninput );
this.or = config.or;
+ this.required = config.required;
// Events
this.dropdowninput.on( 'change', this.onChange.bind( this ) );
// Events
this.dropdowninput.on( 'change', this.onChange.bind( this ) );
// is required. However, validity is not checked for disabled fields, as these are not
// submitted with the form. So we should also disable fields when hiding them.
this.textinput.setDisabled( textinputIsHidden || disabled );
// is required. However, validity is not checked for disabled fields, as these are not
// submitted with the form. So we should also disable fields when hiding them.
this.textinput.setDisabled( textinputIsHidden || disabled );
+ // If the widget is required, set the text field as required, but only if the widget is visible.
+ if ( this.required ) {
+ this.textinput.setRequired( !this.textinput.isDisabled() );
+ }