From 8a1f1ec631c0c5095832ae4a43d4f7b30df62018 Mon Sep 17 00:00:00 2001
From: David Barratt <dbarratt@wikimedia.org>
Date: Mon, 22 Jul 2019 18:53:14 -0400
Subject: [PATCH] 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      | 1 +
 includes/htmlform/fields/HTMLSelectOrOtherField.php       | 1 +
 includes/widget/SelectWithInputWidget.php                 | 8 +++++++-
 .../mediawiki.widgets/mw.widgets.SelectWithInputWidget.js | 8 +++++++-
 4 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/includes/htmlform/fields/HTMLSelectAndOtherField.php b/includes/htmlform/fields/HTMLSelectAndOtherField.php
index 85cbbb1055..354432bb28 100644
--- a/includes/htmlform/fields/HTMLSelectAndOtherField.php
+++ b/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'
diff --git a/includes/htmlform/fields/HTMLSelectOrOtherField.php b/includes/htmlform/fields/HTMLSelectOrOtherField.php
index 47c1f18fae..c928df7a55 100644
--- a/includes/htmlform/fields/HTMLSelectOrOtherField.php
+++ b/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,
 		] );
 	}
diff --git a/includes/widget/SelectWithInputWidget.php b/includes/widget/SelectWithInputWidget.php
index de0e4a63d1..a946653e6e 100644
--- a/includes/widget/SelectWithInputWidget.php
+++ b/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 );
 	}
 }
diff --git a/resources/src/mediawiki.widgets/mw.widgets.SelectWithInputWidget.js b/resources/src/mediawiki.widgets/mw.widgets.SelectWithInputWidget.js
index f61255abb3..4bb4d39528 100644
--- a/resources/src/mediawiki.widgets/mw.widgets.SelectWithInputWidget.js
+++ b/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() );
+		}
 	};
 
 	/**
-- 
2.20.1