Page MenuHomePhabricator

[TUX] [IE10] X in filter field is duplicated when text is entered
Closed, ResolvedPublic

Description

Duplicate X as showing when at least one character is in the search field

When text is entered in the search field, the one X to remove field contents become XX. See screenshot.

Steps to reproduce:

  1. Go to URL (logged in not needed)
  2. Select the search field marked "Filter list"
  3. Enter any one character

Observed:
I. As the character is entered, an X appears at the end of the field (expected)
II. As the list is actually filtered, a short moment after (I), a second X appears. See screenshot (not expected).

Expected:
III. Not two X action clicky thingies, but only one.


Version: master
Severity: normal
URL: https://translatewiki.net/w/i.php?title=Special:Translate&group=out-eol-0-all&language=nl&filter=&action=translate&uselang=en&debug=true

Attached:

Schermafbeelding_2013-04-09_om_14.05.46.png (226×828 px, 11 KB)

Details

Reference
bz47038

Event Timeline

I see two options:

  1. Hide the native clear button of IE (and Chrome)
  2. Remove our custom clear button (so only modern browsers like IE10 and Chrome would have it)

Which one to take? 2 would be simpler and future proof but would reduce a little bit of extra functionality for users using older browsers.

Adding design keyword. Given the options, I'd be okay with option 2: Remove our custom clear button.

It seems that IE adds a "clear" action to regular input fields. This is a browser-specific behaviour which I'm not sure that other browsers will adopt.

As Niklas commented there are two options:

  1. Hide the IE clear action by styling the element in CSS:

.tux-message-filter-box::-ms-clear {display: none;}

  1. Change the input field to be of type "search" and remove the custom clear action. Search is a standard HTML5 type of field for which browsers can provide specific aids (such as clear action, or search history). It is worth noting that not all modern browsers provide such aids as it is the case of Firefox.

I'm fine with option 2 since the lack of this feature is not blocking for users with a browser without support for search input fields.

Increased priority as we'll most probably schedule this for the next sprint.

Related URL: https://gerrit.wikimedia.org/r/63856 (Gerrit Change I468b428a2496a64b56a01fe782762d9805862120)