From fdb59ed9314b1200771fd310a73625834af3400d Mon Sep 17 00:00:00 2001 From: Jan Drewniak Date: Mon, 5 Aug 2019 18:55:08 +0200 Subject: [PATCH] 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 --- .../ui/FilterTagMultiselectWidget.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/resources/src/mediawiki.rcfilters/ui/FilterTagMultiselectWidget.js b/resources/src/mediawiki.rcfilters/ui/FilterTagMultiselectWidget.js index a50cd0ed60..7c8a2f5a26 100644 --- 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 } ); }; /** -- 2.20.1