Maniphest T194523

DropdownInputWidget: In non-JS, focus state border is missing on the right side and other interaction visual glitches
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	Kaartic
	May 11 2018, 6:14 PM

Description

DropdownInputWidget PHP mode, non-JS-infused is currently, as of v0.31.2, carrying some troubled UI and interaction glitches:

All (modern) browsers:

Focus border right is not shown due to solution originally chosen to have basic styling of DropdownInputWidget's select at all:

Example from Special:Preferences in OOUI mode:

Example from OOUI demo:

(Tested in Firefox 60.)

Native option menu is shown in the native offset with the common sizing instead of being bigger than calling select.

Firefox/macOS:

Due to background-color set on select the :hover behaviour is messy resulting the option items to grow and shrink

T194523 screencast 2019-04-02.mp42 MBDownload

IE 8:

Right border is doubled in default mode
Padding together with small space left (equals ~14px) for textual content, label is cut off and dropdown button is very small)

IE 9:

Vendor/native dropdown button is partly shown instead of being pushed out of hidden overflow limit

Expected result

With smaller market share of IE 8 & 9 & Firefox <=34, it's time to revisit this, not using solution #2, but solution #1. Providing IE 10-11, Edge, Firefox 35+ and all other modern browsers a styled and focusable select without messy menu behaviour in certain browsers and degrade gracefully in older browsers…

Details

	Subject	Repo	Branch	Lines +/-
	Update OOUI to v0.31.3	mediawiki/core	master	+403 -355
	DropdownInputWidget: Make WikimediaUI version useable for non-JS users	oojs/ui	master	+25 -21

Customize query in gerrit

Related Objects

Mentioned Here: T168703: DropdownInputWidget has broken width in PHP

Event Timeline

Kaartic created this task.May 11 2018, 6:14 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 11 2018, 6:14 PM

Jdforrester-WMF renamed this task from Special:Preferences-OOUI, No JS: highlight over the right border of the select box is not visible to DropdownInputWidget: In non-JS, focus state border is missing on the right side.May 11 2018, 6:31 PM

Jdforrester-WMF edited projects, added OOUI; removed UI-Standardization, MediaWiki-Core-Preferences.

Jdforrester-WMF updated the task description. (Show Details)

Jdforrester-WMF added a parent task: T180538: Improve Special:Preferences UI/UX.May 11 2018, 6:33 PM

We last discussed it at T168703, @Volker_E and I consider this unfixable; @Esanders apparently had a workaround but he refused to show it to us ;)

I'm not sure this is completely unfixable. I see solutions in the SO post referenced in one of the comments of T168703.

Nikerabbit subscribed.Jun 1 2018, 8:43 PM

• Vvjjkkii renamed this task from DropdownInputWidget: In non-JS, focus state border is missing on the right side to w3caaaaaaa.Jul 1 2018, 1:10 AM

• Vvjjkkii triaged this task as High priority.

• Vvjjkkii added projects: CheckUser, Connected-Open-Heritage-Batch-uploads (RAÄ-KMB_1_2017-02), Tamil-Sites, Gamepress, Hashtags, Jade, KartoEditor, Language-2018-Apr-June, New-Editor-Experiences, Mail, TCB-Team (now WMDE-TechWish).

• Vvjjkkii updated the task description. (Show Details)

• Vvjjkkii removed a subscriber: Aklapper.

TerraCodes renamed this task from w3caaaaaaa to DropdownInputWidget: In non-JS, focus state border is missing on the right side.Jul 1 2018, 2:36 AM

TerraCodes raised the priority of this task from High to Needs Triage.

TerraCodes removed projects: TCB-Team (now WMDE-TechWish), Mail, New-Editor-Experiences, Language-2018-Apr-June, KartoEditor, Jade, Hashtags, Gamepress, Tamil-Sites, Connected-Open-Heritage-Batch-uploads (RAÄ-KMB_1_2017-02), CheckUser.

TerraCodes updated the task description. (Show Details)

TerraCodes added a subscriber: Aklapper.

@Kaartic That posted solution is exactly what we've used and it is the reason for the stated problem. Back then, when I've implemented the fake select we've stopped due to time budget reasons, as the focus cutoff on one side was a very low priority. We could, in all theory, put the tabindex in PHP on the widget div itself and then move the attribute around when infused to (try to) address this issue.
But it's no fun and I wouldn't prioritize it for now.

Volker_E removed a parent task: T180538: Improve Special:Preferences UI/UX.Nov 27 2018, 10:04 PM

The code with the IE 6-8 workaround has turned into messy result:

Firefox/macOS is messing up the option menu due to selects background-color,
Internet Explorer 8 adds the right border and some (expected) padding glitches

Internet Explorer 9 shows undesired the vendor dropdown button

With those, I'd suggest to get remove current solution and instead rely on solution #1 of https://stackoverflow.com/a/13968900/1696030 instead, which would provide us with

a cleaner visual styling of :focus,
not having to deal with indentation of option menu
and fixing above modern browser bugs.

Volker_E raised the priority of this task from Lowest to Medium.Apr 2 2019, 7:32 AM

Change 500660 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] WikimediaUI theme: Re-enable DropdownInputWidget to be visually acceptable

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

gerritbot added a project: Patch-For-Review.Apr 2 2019, 7:33 AM

Volker_E moved this task from Backlog to Reviewing on the OOUI board.Apr 2 2019, 7:33 AM

Volker_E renamed this task from DropdownInputWidget: In non-JS, focus state border is missing on the right side to DropdownInputWidget: In non-JS, focus state border is missing on the right side and other interaction visual glitches.Apr 2 2019, 9:27 PM

@Jdforrester-WMF Following screencast should clarify current native menu misbehaviour with background-color set on select instead of parent handle (as proposed in the patch)

T194523 screencast 2019-04-02.mp42 MBDownload

Volker_E updated the task description. (Show Details)Apr 2 2019, 9:45 PM

In T194523#5079592, @Volker_E wrote:

@Jdforrester-WMF Following screencast should clarify current native menu misbehaviour with background-color set on select instead of parent handle (as proposed in the patch)
T194523 screencast 2019-04-02.mp42 MBDownload

Just wondering, why does the scroll bar show up and go now and then?

Change 500660 merged by jenkins-bot:
[oojs/ui@master] DropdownInputWidget: Make WikimediaUI version useable for non-JS users

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

@Kaartic it's connected to the mis-rendering of Firefox in

“background-color set on select the :hover behaviour is messy resulting the option items to grow and shrink”.

Seems like a browser bug. My wild guess is, that it gets scrambled up in the handover of the browser to the operating system user interface, perhaps by some code artifact that works on other platforms.

Volker_E moved this task from Reviewing to OOUI-0.31.3 on the OOUI board.Apr 4 2019, 12:38 AM

Volker_E edited projects, added OOUI (OOUI-0.31.3); removed OOUI.

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

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

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

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

This landed in MediaWiki in the 1.33.0-wmf.25 alpha branch, and so will be on Wikimedia production from 2019-04-09.

[Still more to do?]

Nope.

Volker_E merged a task: T171455: Dropdown widgets on Special:Delete only has partial OOUI styling.May 17 2019, 8:23 PM

Volker_E added subscribers: TheDJ, Xaosflux, stjn, TerraCodes.

	F28563846: T194523 screencast 2019-04-02.mp4
	Apr 2 2019, 9:30 PM

	F18171052: Screen Shot 2018-05-11 at 11.30.02.png
	May 11 2018, 6:31 PM

	F18169665: missing right border of highlight of select box, 'sample' link broken.png
	May 11 2018, 6:14 PM

DropdownInputWidget: In non-JS, focus state border is missing on the right side and other interaction visual glitchesClosed, ResolvedPublicActions