Allow SelectWithInput to be marked as required and handle that dynamically

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

includes/htmlform/fields/HTMLSelectAndOtherField.php

@@ -130,6 +130,7 @@ class HTMLSelectAndOtherField extends HTMLSelectField {
 			'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'

includes/htmlform/fields/HTMLSelectOrOtherField.php

@@ -135,6 +135,7 @@ class HTMLSelectOrOtherField extends HTMLTextField {
 			'disabled' => $disabled,
 			'textinput' => $textAttribs,
 			'dropdowninput' => $dropdownAttribs,
+			'required' => $this->mParams[ 'required' ] ?? false,
 			'or' => true,
 		] );
 	}

includes/widget/SelectWithInputWidget.php

@@ -24,6 +24,7 @@ class SelectWithInputWidget extends \OOUI\Widget {
 	 *   - 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
@@ -31,7 +32,8 @@ class SelectWithInputWidget extends \OOUI\Widget {
 			[
 				'textinput' => [],
 				'dropdowninput' => [],
-				'or' => false
+				'or' => false,
+				'required' => false,
 			],
 			$config
 		);
@@ -41,6 +43,9 @@ class SelectWithInputWidget extends \OOUI\Widget {
 			$config['dropdowninput']['disabled'] = true;
 		}
 
+		$config['textinput']['required'] = $config['or'] ? false : $config['required'];
+		$config['dropdowninput']['required'] = $config['required'];
+
 		parent::__construct( $config );
 
 		// Properties
@@ -63,6 +68,7 @@ class SelectWithInputWidget extends \OOUI\Widget {
 		$config['dropdowninput'] = $this->config['dropdowninput'];
 		$config['dropdowninput']['dropdown']['$overlay'] = true;
 		$config['or'] = $this->config['or'];
+		$config['required'] = $this->config['required'];
 		return parent::getConfig( $config );
 	}
 }

resources/src/mediawiki.widgets/mw.widgets.SelectWithInputWidget.js

@@ -38,15 +38,17 @@
 	 * @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
-		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;
+		this.required = config.required;
 
 		// Events
 		this.dropdowninput.on( 'change', this.onChange.bind( this ) );
@@ -126,6 +128,10 @@
 		// 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() );
+		}
 	};
 
 	/**