Page MenuHomePhabricator

Page disappears when searching on tablet/desktop
Open, MediumPublic

Description

While using MobileFrontend, when you focus (click/touch) the search box, the page content disappears entirely. The page content should remain visible.

Tested on:
This is true for mediawiki.org, or private wikis; with desktop browsers (Chrome/FF) or mobile devices (Android/iPhone).

Steps to Reproduce:
Compare
https://m.mediawiki.org/wiki/Meza
https://m.mediawiki.org/wiki/Meza#/search <-- you will need to click or touch the search box because the # fragment gets discarded by the browser/MediaWiki

Event Timeline

I assume this is intended behavior because search results are retrieved instantly using XHR (AJAX) and thus the page you're viewing becomes a "search results" page the instant you focus on the search box. Results start appearing as you type characters. I would argue that the search box is taking over the interface prematurely. In our case (fswiki.familysearch.org), the search box itself disappears so you're literally on a white (blank) page. I'm sure we can fix our CSS to continue the display of the search box. Still, I think the display should be more intentional meaning it should update after you click 'submit' rather than being 'predictive' by responding to each character typed in the search box.

I'm not sure if this is intentional or a regression. @alexhollender can you provide the answer?

Jdlrobson renamed this task from Page disappears when searching to Page disappears when searching on tablet/desktop.Feb 22 2019, 12:05 AM

This is not a regression. The search UX has not yet been optimized for desktop.

  • Something we could consider for both desktop and mobile, only trigger the full overlay once the user starts typing, rather than when they focus the search field, e.g.
    Minerva search.png (1×2 px, 538 KB)
  • Specifically for desktop, I wonder if we could follow a pattern similar to Twitter, where the type-ahead search results appear in a dropdown panel, rather than a full overlay, e.g.
    Screen Shot 2019-02-26 at 7.52.30 PM.png (928×1 px, 984 KB)