mw.widgets.SearchInputWidget: Do not pass type: 'search' to TextInputWidget

Causes deprecation warnings.

Most of this code is copy-pasted from OO.ui.SearchInputWidget.

Bug: T148471
Change-Id: I81d52ba938a8b90c5d2c173f1f2682d9e3300e43

includes/widget/SearchInputWidget.php

@@ -31,7 +31,6 @@ class SearchInputWidget extends TitleInputWidget {
 	public function __construct( array $config = [] ) {
 		$config = array_merge( [
 			'maxLength' => null,
-			'type' => 'search',
 			'icon' => 'search',
 		], $config );
 
@@ -56,6 +55,10 @@ class SearchInputWidget extends TitleInputWidget {
 		$this->addClasses( [ 'mw-widget-searchInputWidget' ] );
 	}
 
+	protected function getInputElement( $config ) {
+		return ( new \OOUI\Tag( 'input' ) )->setAttributes( [ 'type' => 'search' ] );
+	}
+
 	protected function getJavaScriptClassName() {
 		return 'mw.widgets.SearchInputWidget';
 	}

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

@@ -30,7 +30,6 @@
 		var $form = config.$input ? config.$input.closest( 'form' ) : $();
 
 		config = $.extend( {
-			type: 'search',
 			icon: 'search',
 			maxLength: undefined,
 			performSearchOnClick: true,
@@ -67,6 +66,12 @@
 				)
 			} );
 		}.bind( this ) );
+
+		this.$element.addClass( 'oo-ui-textInputWidget-type-search' );
+		this.updateSearchIndicator();
+		this.connect( this, {
+			disable: 'onDisable'
+		} );
 	};
 
 	/* Setup */
@@ -75,6 +80,66 @@
 
 	/* Methods */
 
+	/**
+	 * @inheritdoc
+	 * @protected
+	 */
+	mw.widgets.SearchInputWidget.prototype.getInputElement = function () {
+		return $( '<input>' ).attr( 'type', 'search' );
+	};
+
+	/**
+	 * @inheritdoc
+	 */
+	mw.widgets.SearchInputWidget.prototype.onIndicatorMouseDown = function ( e ) {
+		if ( e.which === OO.ui.MouseButtons.LEFT ) {
+			// Clear the text field
+			this.setValue( '' );
+			this.$input[ 0 ].focus();
+			return false;
+		}
+	};
+
+	/**
+	 * Update the 'clear' indicator displayed on type: 'search' text
+	 * fields, hiding it when the field is already empty or when it's not
+	 * editable.
+	 */
+	mw.widgets.SearchInputWidget.prototype.updateSearchIndicator = function () {
+		if ( this.getValue() === '' || this.isDisabled() || this.isReadOnly() ) {
+			this.setIndicator( null );
+		} else {
+			this.setIndicator( 'clear' );
+		}
+	};
+
+	/**
+	 * @inheritdoc
+	 */
+	mw.widgets.SearchInputWidget.prototype.onChange = function () {
+		mw.widgets.SearchInputWidget.parent.prototype.onChange.call( this );
+		this.updateSearchIndicator();
+	};
+
+	/**
+	 * Handle disable events.
+	 *
+	 * @param {boolean} disabled Element is disabled
+	 * @private
+	 */
+	mw.widgets.SearchInputWidget.prototype.onDisable = function () {
+		this.updateSearchIndicator();
+	};
+
+	/**
+	 * @inheritdoc
+	 */
+	mw.widgets.SearchInputWidget.prototype.setReadOnly = function ( state ) {
+		mw.widgets.SearchInputWidget.parent.prototype.setReadOnly.call( this, state );
+		this.updateSearchIndicator();
+		return this;
+	};
+
 	/**
 	 * @inheritdoc mw.widgets.TitleWidget
 	 */