Page MenuHomePhabricator

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

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

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…

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 updated the task description. (Show Details)

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.

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 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 updated the task description. (Show Details)
TerraCodes added a subscriber: Aklapper.
Volker_E triaged this task as Lowest priority.Jul 31 2018, 4:13 PM

@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.

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 Normal.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

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)

Volker_E updated the task description. (Show Details)Apr 2 2019, 9:45 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)

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?]

Volker_E closed this task as Resolved.Apr 6 2019, 2:26 AM
Volker_E claimed this task.

Nope.