Page MenuHomePhabricator

IE: Additional 'x' on Advanced search on 'px'
Closed, ResolvedPublic1 Story Points

Description

On IE all fields of Advanced Search have a small x to delete the content of the field when the field has the focus. For the file height/width this is printed on top of the 'px' of the field.

Browser: Internet Explorer 11

Notes
This should be solvable with a css rule specific for the internet explorer ("ms-clear") -
This can be tested on sourcelabs, where different browsers can be run, or with a vm for internet explorers

Event Timeline

Restricted Application added a project: TCB-Team. · View Herald TranscriptApr 3 2018, 11:28 AM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Lea_WMDE triaged this task as Normal priority.Apr 25 2018, 12:09 PM
Lea_WMDE updated the task description. (Show Details)
Lea_WMDE set the point value for this task to 1.

Change 431571 had a related patch set uploaded (by Ebba Aniansson; owner: Ebba Aniansson):
[mediawiki/extensions/AdvancedSearch@master] Remove the additional x (ms-clear) from inout fields

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

aniansson claimed this task.May 7 2018, 1:57 PM
aniansson added a project: User-aniansson.
aniansson moved this task from Todo to Doing on the WMDE-FUN-Sprint-2018-05-02 board.

Change 431571 merged by jenkins-bot:
[mediawiki/extensions/AdvancedSearch@master] Remove the additional x (ms-clear) from input fields

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

thiemowmde moved this task from Unsorted to IE11 on the Browser-Support-Internet-Explorer board.
thiemowmde added subscribers: thiemowmde, matmarex.

Isn't this a bug in the OOUI TextInputWidget widget that should be reported and fixed upstream? I see OOUI already sets ::-ms-clear to display: none for all TextInputWidget with type="search" (see https://github.com/wikimedia/oojs-ui/blob/master/src/styles/widgets/TextInputWidget.less#L42). But it doesn't do this when a TextInputWidget does have the label option set to something. As the screenshot shows the right aligned label text conflicts with the right aligned clear button IE10+ display.

I believe the CSS/LESS that should be added upstream to OOUI should look like this:

/* Remove clear buttons (IE 10+, Edge 12+) that conflict with identically aligned labels */
.oo-ui-textInputWidget-labelPosition-after.oo-ui-labelElement ::-ms-clear {
  display: none;
}

Reasoning:

  • The selector .oo-ui-textInputWidget-labelPosition-after does two things:
    • The rule needs to be restricted to TextInputWidgets.
    • The rule is not relevant when the label is "before", but only when it's "after" the input.
  • Unfortunately one of the two "before" and "after" classes is always set, even when there is no label. The additional .oo-ui-labelElement selector makes sure the rule is only applied to fields that have a label.

Change 431726 had a related patch set uploaded (by Thiemo Kreuz (WMDE); owner: Thiemo Kreuz (WMDE)):
[oojs/ui@master] Remove IE10+ clear button conflicting with right-aligned labels

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

Change 431726 merged by jenkins-bot:
[oojs/ui@master] TextInputWidget: Hide IE10+'s clear button when it conflicts with labels

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

Demo page test with IE11 (albeit tested through VM):

Clear button not shown and doesn't get in the way when there is a label position-after'ed in the way:
Clear button shows as expected on focus when there's no label position-after'ed:

Success.

Tonina_Zhelyazkova_WMDE removed aniansson as the assignee of this task.May 9 2018, 8:16 AM
Tonina_Zhelyazkova_WMDE added a subscriber: aniansson.

Wonderful, thanks a lot for everything here, @Jdforrester-WMF! This means we can possibly get rid of the local override https://gerrit.wikimedia.org/r/431571 the moment the fix is released with a new OOUI version. @Lea_WMDE, do you want to track this in a separate ticket?

@thiemowmde @Lea_WMDE OOUI v0.27.0 with your patch was released yesterday, and I just merged the change in MediaWiki to use it (https://gerrit.wikimedia.org/r/#/c/432028/), so you can probably do that now.

Change 432142 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[mediawiki/extensions/AdvancedSearch@master] Revert "Remove the additional x (ms-clear) from input fields"

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

matmarex removed a subscriber: matmarex.May 9 2018, 9:56 PM

@matmarex thanks for the info!

@thiemowmde can we remove the override in this ticket also? The description still holds valid to what we want. Or do you see a reason why we need a seperate ticket?

The patch https://gerrit.wikimedia.org/r/432142 is already there, and already linked to this ticket. If the FUN team can manually test and approve this patch, everything is done and we don't need an other ticket. :-)

matmarex removed a subscriber: matmarex.May 11 2018, 9:18 PM
aniansson moved this task from Backlog to Completed on the User-aniansson board.May 14 2018, 12:52 PM

Change 432142 merged by jenkins-bot:
[mediawiki/extensions/AdvancedSearch@master] Revert "Remove the additional x (ms-clear) from input fields"

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

Lea_WMDE closed this task as Resolved.May 30 2018, 10:35 AM