htmlform: Add HTMLOrderedMultiselectField for use in HTMLForm

This field uses a new widget based on OO.ui.MenuTagMultiselectWidget to
allow choosing from multiple options in a dropdown. It internally uses
a textarea ensuring that order of selected chips are preserved. No-JS
fallback is a textarea with no dropdown, but validations ensure that
arbitrary values entered are not accepted.

Bug: T382995
Change-Id: I4c8548a820c6035b28efdb47df8d7cbeeb407031

1 files changed, 59 insertions, 0 deletions

diff --git a/includes/htmlform/fields/HTMLOrderedMultiselectField.php b/includes/htmlform/fields/HTMLOrderedMultiselectField.php
new file mode 100644
index 000000000000..13348f1c8180
--- /dev/null
+++ b/includes/htmlform/fields/HTMLOrderedMultiselectField.php
@@ -0,0 +1,59 @@
+<?php
+
+namespace MediaWiki\HTMLForm\Field;
+
+use MediaWiki\Html\Html;
+use MediaWiki\Widget\OrderedMultiselectWidget;
+
+/**
+ * Implements a tag multiselect input field with a searchable dropdown containing valid tags.
+ *
+ * Besides the parameters recognized by HTMLTagMultiselectField, additional recognized
+ * parameters are:
+ *  options - array, the list of allowed values.
+ *
+ * The result is a newline-delimited string of selected tags.
+ *
+ * @note This widget is not likely to remain functional in non-OOUI forms.
+ */
+class HTMLOrderedMultiselectField extends HTMLTagMultiselectField {
+
+	protected function getInputWidget( $params ) {
+		$widget = new OrderedMultiselectWidget( $params + [
+			'options' => $this->getOptionsOOUI(),
+		] );
+		$widget->setAttributes( [ 'data-mw-modules' => implode( ',', $this->getOOUIModules() ) ] );
+		return $widget;
+	}
+
+	public function validate( $value, $alldata ) {
+		$this->mParams['allowedValues'] = self::flattenOptions( $this->getOptions() );
+		return parent::validate( $value, $alldata );
+	}
+
+	public function getOptionsOOUI() {
+		$optionsOouiSections = [];
+		$options = $this->getOptions();
+
+		foreach ( $options as $label => $section ) {
+			if ( is_array( $section ) ) {
+				$optionsOouiSections[ $label ] = Html::listDropdownOptionsOoui( $section );
+				unset( $options[$label] );
+			}
+		}
+
+		// If anything remains in the array, they are sectionless options. Put them at the beginning.
+		if ( $options ) {
+			$optionsOouiSections = array_merge(
+				[ '' => Html::listDropdownOptionsOoui( $options ) ],
+				$optionsOouiSections
+			);
+		}
+
+		return $optionsOouiSections;
+	}
+
+	public function getOOUIModules() {
+		return [ 'mediawiki.widgets.OrderedMultiselectWidget' ];
+	}
+}