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

diff --git a/includes/htmlform/fields/HTMLSelectAndOtherField.php b/includes/htmlform/fields/HTMLSelectAndOtherField.php
index 85cbbb1..354432b 100644 (file)
--- 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 47c1f18..c928df7 100644 (file)
--- 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 de0e4a6..a946653 100644 (file)
--- 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 f61255a..4bb4d39 100644 (file)
--- 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() );
+               }
        };
 
        /**