Select list - .item-select class direction:rtl bug in FireFox


#1

I have a dropdown box on an Account page where the user can change the language. We are using the standard format:

<label class="item item-input item-select">
    <div class="input-label">
      Lightsaber
    </div>
    <select>
      <option>Blue (not blue)</option>
      <option selected>Green (not green)</option>
      <option>Red (not red)</option>
    </select>
  </label>

And that works fine in Chrome - but in Firefox we are seeing this (the addition of the parentheses was important to demonstrate why RTL isn’t working, although it doesn’t have the same problem in Chrome):

It would appear that the class .item-select is trying to use direction:rtl as a workaround to push the text to the right hand side… but this is failing in Firefox where text is altered by RTL.

The final closing parentheses of the selected item is dropped and an opening parenthesis is added to the front of the string. The strings show up unaffected in the actual dropdown list, because RTL is overridden with LTR in the css: .item-select option

How can the selected text be right-aligned without using RTL and breaking FireFox?


#2

I have updated Firefox and the problem has disappeared. I thought I had updated Firefox before - I haven’t used it in a while. It had updated to version 43.0.1. Perhaps it needed to update in two stages… now it is at version 45.0

It looks like people using Arabic in RTL were seeing the parenthesis being similarly malformed in some other places. So this may have only affected Firefox around version 43 and has recently been fixed.