Page MenuHomePhabricator

Search proposals dropdown (jquery autocomplete) do not work on mobile devices e.g. Vector, Timeless
Open, Needs TriagePublicBUG REPORT

Description

Steps to Reproduce:
Using Android Phone (i.e. Samsung note 8) on Wikipedia (tested on several different sites, like the Engilsh version of Wikipedia), while using desktop mode (mobileaction=toggle_view_desktop). This issue does not show up on desktop mobile emulators (like the Chrome dev tools) but only on the mobile device itself.

Actual Results:
The search suggestions box does not appear.

Expected Results:
Search Results box (and suggestions) should appear also on mobile view. When using responsive skins (like Timeless) and not the Minerva/MobileFrontend view, the mobile device user needs access to the same search suggestions.

Event Timeline

Wess created this task.Mar 29 2019, 7:30 AM
Restricted Application added a project: TCB-Team. · View Herald TranscriptMar 29 2019, 7:30 AM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Restricted Application added a project: Discovery-Search. · View Herald TranscriptMar 29 2019, 9:13 PM
Wess added a comment.Apr 3 2019, 10:49 PM

After checking several versions, it seems like the last working branch for this issue was REL1_27. I was not able to locate the exact change that made the actual difference.

While related to search, someone from mobile frontend will likely need to take a look at this. Will leave it to them to triage the priority.

Jdlrobson moved this task from Needs triage to Triaged on the Mobile board.Apr 4 2019, 10:01 PM
Wess added a comment.Apr 14 2019, 9:25 AM

I am not sure this has to do with MFE, as the situation described is for using the non MFE interface.
Another interesting point - this issue is not appearing on Apple devices.

Jdlrobson added a subscriber: Jdlrobson.

is the issue with Vector skin, Timeless skin, Minerva skin or all 3? From the description, it sounds like it's not anything to do with MobileFrontend...
Can you elaborate possibly with some screenshots, as I'm afraid I'm not understanding the bug you are reporting.

@Wess: I'm not aware of any autocomplete for text entered in the search box. Do you mean the dropdown proposals? Please clarify and also answer the questions by Jdlrobson.

Wess added a comment.May 7 2019, 12:35 PM

@Aklapper - yes, the issue is with the search suggestions dropdown.
@Jdlrobson the issue is amongst several skins I've been trying, including Timeless and Vector. It's not a skin issue. It has nothing to do with MobileFrontend as it is relevant to the non MFE view. I will upload screenshots, but there's nothing in them (that's the issue...)
Here is the view from chrome browser on desktop while using mobile emulation in the inspector:


Search suggestions are clearly visible.
Here is the view from Android device (Samsung note 8). Suggestions are not shown:

Aklapper renamed this task from Autocomplete in search box not working on mobile to Search proposals dropdown in search box not shown on mobile.May 7 2019, 12:47 PM
Aklapper removed a project: MinervaNeue.

I can replicate in Timeless and Vector but not Minerva on a Samsung galaxy . More than likely a bug in jquery autocomplete which Minerva doesn't use

Jdlrobson renamed this task from Search proposals dropdown in search box not shown on mobile to Search proposals dropdown (jquery autocomplete) do not work on mobile devices e.g. Vector, Timeless.May 7 2019, 3:28 PM
alistair3149 added a subscriber: alistair3149.EditedDec 4 2019, 5:01 PM

@Jdlrobson I am able to replicate the same issue on MW 1.31.3 with a custom skin that I have been developing from scratch without using MobileFrontend. This is clearly not a skin-specific issue.
To add onto what @Wess mentioned, the dropdown only worked when:

  • Through a desktop browser.
  • Through a desktop browser with mobile emulation
  • Through the mobile browser when remote connected to a desktop using Chrome DevTools, but only works when interact through the desktop not the mobile.

It doesn't work when it is accessed through a mobile device.
I have tested with different browser on Android (including Chrome (Stable, Dev), Firefox (Preview, Focus), Brave), apparently it is not a browser specific issue as well.

To put more insight into this, the suggestion results does not update at all from its previous state when interacted through mobile (typing on the search bar).
All the suggestion results remained the same as the previous state, there is no change in both HTML and CSS when interacted.

EDIT: It is also reproducible on both En Wikipedia and MediaWiki in Vector, Timeless, Cologne Blue, Modern, and MonoBook.

Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptDec 4 2019, 5:01 PM
Oznogon added a subscriber: Oznogon.EditedDec 11 2019, 8:29 AM

I can also replicate this at will in Timeless, Vector, Example, and Poncho on Android Firefox, Firefox Preview, and Chrome, against both MW 1.33.1 and English Wikipedia. It also affects these mobile browsers when selecting "Desktop view". No desktop browsers appear to be affected (tested in Firefox 70+, Chrome, and Safari).

To add onto my comment before, the issue seems to be very widespread. Apart from the WMF wikis, I'm also able to replicate the same bug on RuneScape Wiki (without MF) and PCGamingWiki, in which both of them use a custom skin.

I am able to replicate the same issue on MW 1.31.3 with a custom skin that I have been developing from scratch without using MobileFrontend. This is clearly not a skin-specific issue.

But I'm guessing you are extending Skin without overriding the value of 'search' in getDefaultModules. Minerva does this and thus does not have the problem. The default skin shipped with MediaWiki is not designed with mobile in mind.

The problem is the search code in core is jquery autocomplete. This was not built with mobile in mind.

As part of the Desktop Improvements project we'll be likely looking to replace the search code in MediaWiki core with something more mobile-friendly, however this is not likely to happen any time soon. In mean time I suggest custom skins looking to work on mobile, provide their own JavaScript for search. The Minerva skin is the only skin I am aware of that replaces the search implementation and thus is the only skin not impacted by this issue so looking at its code will likely help with this.

alistair3149 added a comment.EditedDec 11 2019, 6:05 PM

@Jdlrobson It wasn't a problem in the older MW build like 1.27 so my best guess is that it could be related to the jQuery update to 3.X. Anyways thanks for the pointer, I'll share the result if I can find a solution that would help to migrate this issue.

EDIT: The search module is being replaced in MobileFrontend instead of MinervaNeue , there are too many dependencies to transplant the feature.

Isarra added a subscriber: Isarra.Dec 11 2019, 6:23 PM

The Minerva skin is the only skin I am aware of that replaces the search implementation and thus is the only skin not impacted by this issue so looking at its code will likely help with this.

Given this affects every other skin, is there any particular reason the actually working js in Minerva isn't in core instead?

Jdlrobson added a subscriber: Jdrewniak.EditedDec 11 2019, 6:40 PM

Given this affects every other skin, is there any particular reason the actually working js in Minerva isn't in core instead?

Minerva uses an overlay architecture and libraries that are not in core. At current time I would actually make a recommendation to use the search in the discovery portal (WMTypeAhead) - and would be keen to see that packaged up and in core and used by all skins, removing the jquery.autocomplete and Minerva code.

@Jdrewniak did an awesome audit of search - https://www.mediawiki.org/wiki/User:JDrewniak_(WMF)/notes/Search_widgets_at_Wikimedia and see T153417. We'll get to this as part of Desktop Improvements but I don't think there's a golden bullet for this. Experiments with Timeless using the discovery portal JS would be really useful to push us in the direction of a better library for all skins.

@Jdlrobson do you have a pointer on where can I look up the repo for the discovery portal?

Where is the source for this?

Oh, pfft. Thanks.

Also random note, this appears to only affect newer and up-to-date android devices.

Oznogon added a comment.EditedDec 12 2019, 4:12 AM

For what it's worth, auto suggestions _do_ work on the same affected devices and sites from the search bar on Special:Search (OOUI; T100898).

@Oznogon The OOUI search uses a different search widget as I remembered, so it is not affected.
@Jdlrobson I ended up implementing WMTypeAhead with success but I don't know how or where to make a patch, I have given the code to @Isarra and see what he will do with it.

@Isarra is awesome I'm sure she'll be able to handle the patch part. Thanks @alistair3149! @Isarra happy to review if you did feel like moving this into core :)

Nirmos added a subscriber: Nirmos.Jan 16 2020, 1:25 PM

Okay, having looked at what Alistair provided, we are not reusing even a subset of the portals js in timeless. That is some truly scary stuff.

Unless of course I cave and... oh gods why...