In order to enable the Special:RecentChanges page on mobile, the advanced filters on that page have to be adequately functional. After investigating various solutions to this end in T224655 it was deemed that the filters are mostly functional, except for the filter dropdown (i.e. the "menuSelectWidget" in rc-filter parlance).
This task encompasses just the changes need to make that widget functional on mobile.
This does not include changes that effect the layout or visual correctness of the widget, but just its functionality.
The widget is broken in three ways.
- The dropdown options disappear on small screens.
- The virtual keyboard appears when you tap the "filter changes" input as well as every time you check a checkbox in the dropdown. On mobile, this selection process can function adequately without the keyboard at all.
- When tags are added to the tag-list above the dropdown, the dropdown is misplaced, only to be corrected after a scroll event fires. This correction should occur when a tag selection happens.
Developer notes
- Invisible options - It's been found that adding width: 100% to this menuSelectWidget CSS rule can fix the "disappearing options" issue:
.mw-rcfilters-ui-menuSelectWidget-body { max-height: 70vh; min-width: 100%; }
- Virtual keyboard - In FilterTagMenuSelectWidget.js The text input seems to explicitly gain focus in the onMenuToggle method on line#341, and regain focus through the onMenuChoose method on line#283. We could wrap these focus calls in some sort of "isMobile" conditional, or add a "readonly" attribute to this input on mobile (unless someone has a better idea).
FilterTagMultiselectWidget.prototype.onMenuToggle = function ( isVisible ) { // Parent FilterTagMultiselectWidget.parent.prototype.onMenuToggle.call( this ); if ( isVisible ) { 👉this.focus(); ... FilterTagMultiselectWidget.prototype.onMenuChoose = function ( item ) { this.controller.toggleFilterSelect( item.model.getName() ); // Select the tag if it exists, or reset selection otherwise this.selectTag( this.findItemFromData( item.model.getName() ) ); 👉 this.focus(); };
- Positioning after change - on line#273 of FilterTagMultiSelectWidget.js the updateIfHeightChanged method is overridden with a no-op. If this override is removed, the dropdown positions itself correctly when the tags are selected.
/** * Override parent method to avoid unnecessary resize events. */ FilterTagMultiselectWidget.prototype.updateIfHeightChanged = function () { };
QA steps
Environment: beta cluster, Special:RecentChanges page https://en.m.wikipedia.beta.wmflabs.org/wiki/Special:RecentChanges
mobile mode: AMC
user permissions: logged in
The goal is to ensure the filter menu (i.e. the popup menu that appears when clicking the "filter" input) works "correctly" on mobile devices. Testing on real device, both iOS and Android is preferred, since this involves checking the behaviour of the onscreen keyboard. The filter menu should meet the AC below.
Acceptance Criteria
- The filter menu doesn't disappear on mobile devices unexpectedly, or when scrolling through it.
- The filter menu closes when clicking the "x" icon on the filter input.
- The virtual keyboard does not appear when the filter menu appears.
- The virtual keyboard does not appear when checking an option in the filter menu.
- Checking an option in the filter menu adds it to the "active filters" area.
- The dropdown positions itself correctly below the "Filters" input when more than one row of tags is added.