Page MenuHomePhabricator

Dropdown widgets menu inferior on mobile - should use native `select` element for better mobile compatibility
Closed, ResolvedPublic

Description

On the Wikipedia homepage www.wikipedia.org the language selection dropdown uses a select element which works nicely on mobile, which both in Android/iOS uses a native dialog

The OOUI implementation uses divs and when these divs are long can be unusable on mobile and get clipped.

Current experience:

What it should actually work like

Please make sure clicking these elements triggers a native select element on mobile.

Notice how all options are not visible nor clickable:


Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptNov 16 2017, 7:15 PM
Jdlrobson renamed this task from Dropdown widgets should use native SELECT element for better mobile compatibility to Dropdown widgets unusable on mobile - should use native SELECT element for better mobile compatibility.Nov 16 2017, 7:22 PM
Jdlrobson updated the task description. (Show Details)

There are actually a few other reasons why we might want to use a <select> internally (whether or not we show it to the user). It would make JS and PHP-infused widgets more consistent (we keep the PHP-generated <select> when infusing and I'm sure there is some edge cases where this causes problems), and it would allow custom OOUI themes to display the native interface if the theme's author doesn't want to write custom styles.

Once we have a hidden <select>, that is synchronized with our visible UI, it should be a simple CSS change to make it visible instead.

Note that this might not be possible for DropdownWidget, as we allow the options' labels to contain HTML markup (while <option> may only contain text). It is, however, possible for DropdownInputWidget (since we limit its functionality to what is possible with similar HTML, like for all InputWidgets).

matmarex claimed this task.Nov 23 2017, 8:35 PM

I'll work on this soon, but I'll need code review for it to actually get merged, perhaps from you @Jdlrobson? :)

Change 393352 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[oojs/ui@master] DropdownInputWidget: Generate a hidden <select> in JS

https://gerrit.wikimedia.org/r/393352

Change 393352 merged by jenkins-bot:
[oojs/ui@master] DropdownInputWidget: Generate a hidden <select> in JS

https://gerrit.wikimedia.org/r/393352

Volker_E triaged this task as High priority.Nov 28 2017, 11:22 PM
Volker_E moved this task from Backlog to OOjs-UI-0.24.3 on the OOUI board.
Volker_E edited projects, added OOUI (OOjs-UI-0.24.3); removed OOUI.
Volker_E updated the task description. (Show Details)
Volker_E removed a subscriber: gerritbot.
Volker_E moved this task from OOjs-UI-0.24.3 to Next-up on the OOUI board.Nov 28 2017, 11:35 PM
Volker_E edited projects, added OOUI; removed OOUI (OOjs-UI-0.24.3).
Volker_E moved this task from Next-up to Doing on the OOUI board.Nov 28 2017, 11:42 PM
matmarex removed matmarex as the assignee of this task.Nov 29 2017, 3:59 PM

With that patch merged, there is now a hidden <select> in the DOM of DropdownInputWidget, and if you were to show it and hide the "pretty" DropdownWidget, it would function entirely correctly.

We still need to make it appear. I'm not sure how we want to detect "mobile" here, though. Should we just use OO.ui.isMobile() (that checks for wgMFMode)? Or something different? I think @Volker_E said he's thinking about this, so you and @Jdlrobson please coordinate :)

(I'm not actively working on this right now, so I'm unclaiming this task. Ping me if you need me to implement stuff, but the remaining part should be easy, once we decide how to do it.)

Device resolution would be the best way to do this. Showing it for 720px and less.

Volker_E moved this task from Unsorted to OOUI on the UI-Standardization board.Mar 31 2018, 3:15 AM

@Jdlrobson Do you have a hardened and QA backed test for that in MobileFrontend?

for that

what's that?

We still need to make it appear. I'm not sure how we want to detect "mobile" here, though. Should we just use OO.ui.isMobile() (that checks for wgMFMode)? Or something different? I think @Volker_E said he's thinking about this, so you and @Jdlrobson please coordinate :)

I would propose feature detecting for touch device support via browser.supportsTouchEvents or !browser.isWideScreen to detect mobile. I think the former would make more sense though.

Volker_E renamed this task from Dropdown widgets unusable on mobile - should use native SELECT element for better mobile compatibility to Dropdown widgets inferior on mobile - should use native SELECT element for better mobile compatibility.Mar 27 2019, 11:31 PM

So from a conversation of today with @Jdlrobson, the widget handle itself could be untouched and just showing the native select's menu seems sufficiently resolving this for MobileFrontend requirements.

Volker_E renamed this task from Dropdown widgets inferior on mobile - should use native SELECT element for better mobile compatibility to Dropdown widgets menu inferior on mobile - should use native `select` element for better mobile compatibility.Mar 28 2019, 1:09 AM

IMHO, the only possibility to handle dropdowns on Mobile is to use Overlay system, when user clicks a dropdown - we should show a fullscreen overlay with scrollable list of options. but that's most probably lots of work and totally out of the scope.

Volker_E moved this task from Doing to Reviewing on the OOUI board.May 18 2019, 11:12 PM

Change 511094 merged by jenkins-bot:
[oojs/ui@master] DropdownInputWidget: Use native select when isMobile is true

https://gerrit.wikimedia.org/r/511094

@pmiazga The path we've taken now is to provide native selects when the isMobile flag is set true (MinervaNeue sets it and it could be unset dynamically at a certain media query to enable custom dropdown on desktop again).
You need to use a OOUI DropdownInputWidget to benefit from this solution. The advantage is, that the native handling by the OS/browser is known to users and should be optimized for the specific platform and that you're still able to interact with the dropdown dynamically per JS in the OOUI way.
Normal DropdownWidget's are not providing the select (in OOUI terms input).

@pmiazga The path we've taken now is to provide native selects when the isMobile flag is set true (MinervaNeue sets it and it could be unset dynamically at a certain media query to enable custom dropdown on desktop again).

(To clarify, it's not about the skin, it's about the mobile/desktop mode – our isMobile() is equivalent to wgMFMode. It's defined here:
https://github.com/wikimedia/mediawiki/blob/master/resources/src/ooui-local.js#L11)

Volker_E moved this task from Reviewing to OOUI-0.32.0 on the OOUI board.May 19 2019, 12:52 PM
Volker_E edited projects, added OOUI (OOUI-0.32.0); removed OOUI.

cc: @alexhollender Important for AMC work.

@Volker_E thanks. I was actually just investigating how mobile handles <select multiple> (won't work on desktop): https://codepen.io/alexhollender/full/ZNBvLP. Good handling, though no support for styling or sub-headings for options.

Change 513020 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] Update OOUI to v0.32.0

https://gerrit.wikimedia.org/r/513020

Change 513020 merged by jenkins-bot:
[mediawiki/core@master] Update OOUI to v0.32.0

https://gerrit.wikimedia.org/r/513020