move rcfilters scroll logic to better support mobile mode

Moves the logic that scrolls the rcfilters search input into view
from the onInputFocus callback to the onMenuToggle callback.

This allows the scroll behaviour to be triggered on mobile when
you tap the active filters area, and prevents the scroll behaviour
from triggering when the menu closes on mobile.

Bug: T229360
Change-Id: I1ca5c59e16a5dc6c6f473bbf3825a3e7c1e0f28e

diff --git a/resources/src/mediawiki.rcfilters/ui/FilterTagMultiselectWidget.js b/resources/src/mediawiki.rcfilters/ui/FilterTagMultiselectWidget.js
index a50cd0e..7c8a2f5 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/FilterTagMultiselectWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/FilterTagMultiselectWidget.js
@@ -384,6 +384,9 @@ FilterTagMultiselectWidget.prototype.onSavedQueriesItemUpdate = function ( item
  * @param {boolean} isVisible Menu is visible
  */
 FilterTagMultiselectWidget.prototype.onMenuToggle = function ( isVisible ) {
+
+       var scrollToElement = this.isMobile ? this.input.$input : this.$element;
+
        // Parent
        FilterTagMultiselectWidget.parent.prototype.onMenuToggle.call( this );
 
@@ -404,6 +407,13 @@ FilterTagMultiselectWidget.prototype.onMenuToggle = function ( isVisible ) {
                                }.bind( this )
                        );
                }
+
+               // Only scroll to top of the viewport if:
+               // - The widget is more than 20px from the top
+               // - The widget is not above the top of the viewport (do not scroll downwards)
+               //   (This isn't represented because >20 is, anyways and always, bigger than 0)
+               this.scrollToTop( scrollToElement, 0, { min: 20, max: Infinity } );
+
        } else {
                // Clear selection
                this.selectTag( null );
@@ -428,7 +438,6 @@ FilterTagMultiselectWidget.prototype.onMenuToggle = function ( isVisible ) {
  * @inheritdoc
  */
 FilterTagMultiselectWidget.prototype.onInputFocus = function () {
-       var scrollToElement = this.isMobile ? this.input.$input : this.$element;
 
        // treat the input as a menu toggle rather than a text field on mobile
        if ( this.isMobile ) {
@@ -438,12 +447,6 @@ FilterTagMultiselectWidget.prototype.onInputFocus = function () {
                // Parent
                FilterTagMultiselectWidget.parent.prototype.onInputFocus.call( this );
        }
-
-       // Only scroll to top of the viewport if:
-       // - The widget is more than 20px from the top
-       // - The widget is not above the top of the viewport (do not scroll downwards)
-       //   (This isn't represented because >20 is, anyways and always, bigger than 0)
-       this.scrollToTop( scrollToElement, 0, { min: 20, max: Infinity } );
 };
 
 /**