htmlform: Implement `max` parameter in HTMLMultiSelectField

Can be used to specify a maximum number of selectable items.
Server-side, the constraint is always checked upon form submission (in
`validate()`), regardless of other options.

Client-side, this is only implemented in the dropdown version (OOUI's
MenuTagMultiselect), because CheckboxMultiselectInputWidget does not
support any bounds on the number of selected elements.

Bug: T380406
Change-Id: I26845cc215186fc4993cd7cba84222696dc06d81

2 files changed, 14 insertions, 4 deletions

diff --git a/includes/htmlform/fields/HTMLMultiSelectField.php b/includes/htmlform/fields/HTMLMultiSelectField.php
index 602da011f06d..115ff545285c 100644
--- a/includes/htmlform/fields/HTMLMultiSelectField.php
+++ b/includes/htmlform/fields/HTMLMultiSelectField.php
@@ -30,6 +30,8 @@ class HTMLMultiSelectField extends HTMLFormField implements HTMLNestedFilterable
 	 *   - flatlist: If given, the options will be displayed on a single line (wrapping to following
 	 *     lines if necessary), rather than each one on a line of its own. This is desirable mostly
 	 *     for very short lists of concisely labelled options.
+	 *   - max: Maximum number of elements that can be selected. On the client-side, this is only
+	 *     enforced when using a dropdown.
 	 */
 	public function __construct( $params ) {
 		parent::__construct( $params );
@@ -71,6 +73,10 @@ class HTMLMultiSelectField extends HTMLFormField implements HTMLNestedFilterable
 		// Reject nested arrays (T274955)
 		$value = array_filter( $value, 'is_scalar' );
 
+		if ( isset( $this->mParams['max'] ) && ( count( $value ) > $this->mParams['max'] ) ) {
+			return $this->msg( 'htmlform-multiselect-toomany', $this->mParams['max'] );
+		}
+
 		# If all options are valid, array_intersect of the valid options
 		# and the provided options will return the provided options.
 		$validOptions = HTMLFormField::flattenOptions( $this->getOptions() );
@@ -241,11 +247,14 @@ class HTMLMultiSelectField extends HTMLFormField implements HTMLNestedFilterable
 		}
 
 		if ( !$hasSections && $out ) {
+			$firstFieldData = $out[0]->getData() ?: [];
 			if ( $this->mPlaceholder ) {
-				$out[0]->setData( ( $out[0]->getData() ?: [] ) + [
-					'placeholder' => $this->mPlaceholder,
-				] );
+				$firstFieldData['placeholder'] = $this->mPlaceholder;
+			}
+			if ( isset( $this->mParams['max'] ) ) {
+				$firstFieldData['tagLimit'] = $this->mParams['max'];
 			}
+			$out[0]->setData( $firstFieldData );
 			// Directly return the only OOUI\CheckboxMultiselectInputWidget.
 			// This allows it to be made infusable and later tweaked by JS code.
 			return $out[0];
diff --git a/resources/src/mediawiki.htmlform/multiselect.js b/resources/src/mediawiki.htmlform/multiselect.js
index 7e8dc38a3096..413af2ba34ce 100644
--- a/resources/src/mediawiki.htmlform/multiselect.js
+++ b/resources/src/mediawiki.htmlform/multiselect.js
@@ -18,7 +18,8 @@ function convertCheckboxesWidgetToTags( fieldLayout ) {
 			items: menuTagOptions
 		},
 		disabled: checkboxesWidget.isDisabled(),
-		placeholder: fieldData.placeholder || ''
+		placeholder: fieldData.placeholder || '',
+		tagLimit: fieldData.tagLimit || 0
 	} );
 	menuTagWidget.setValue( checkboxesWidget.getValue() );