491791 - Top select box does not visually display the selected value

Status: RESOLVED WORKSFORME

(Core :: Layout: Form Controls, defect)

Description

[Jayden]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.10) Gecko/2009042316 Firefox/3.0.10 (.NET CLR 3.5.30729)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.10) Gecko/2009042316 Firefox/3.0.10 (.NET CLR 3.5.30729)

Using javascript I am manipulating the location of tbody elements in a table.  After manipulating the position of these tbody elements I go through and change the order number in the select box in each tbody.  Everything seems to work correctly unless you move the select boxes in a certain order on my test case.

Reproducible: Always

Steps to Reproduce:
1. Click the Third select box and change it to 2.  The Third will change to 2 and the Second will change to 3. (correct behavior)  
2. Click what was the Third select box (now Second) and change it to 1.  The Third will change to 1 and the First will change to 1.  In the source the First has changed to 2 but it is still displaying 1.  (incorrect behavior)
3. Shift Refresh the page and change the First to 2.  The First will change to 2 and the Second will change to 1.  (correct behavior)
4. Change the First to 1.  The First will change to 1 and the Second will change to 2.  (correct behavior)
5. Now if you repeat steps 1, 2, and 3 everything will work as expected (correct behavior)
Actual Results:  
If you start by moving the 2nd or 3rd boxes into the 1st position the 1st elements selected value will change but the displayed value will not.  If you move the 1st box at all everything will work correctly no matter what you move after you have touched it.

Expected Results:  
The 1st box should display the selected value when it is changed.

If you put an alert before and after these 2 lines:
          reorderSelect.options[y].defaultSelected = true;
          reorderSelect.options[y].selected = true;
you will see the value for the 1st box quickly change to the correct selected value but it then quickly changes back to the original value of 1.

I have attached an image as well as the test case.  In the image I moved the 3rd box to the 1st position and then moved the 2nd box to the 1st position.  I then brought up the selected source.  In the source part of the image I highlighted a character beside each number (2, 3, 1) and if you look at the select box for these the select box for 1 says that 3 is selected but 1 is being displayed.

Comment 1

[Jayden]

Attachment: Test Case

Comment 2

[Jayden]

Attachment: Display of the select boxes and selected source

In this case I have moved the 3rd box to position 1 and then the 2nd box to position 1.

Comment 3

[Jayden]

I have not tested this with a different doctype so I don't know if it will act the same.

Comment 4

[Jayden]

Tested in the Firefox 3.5 nightlies with the same effect.

Comment 5

[Boris Zbarsky [:bzbarsky]]

Would be nice to have a minimal-ish testcase (smallest possible amout of JS that still shows the problem).

Mats, do you want to take a look at this?

Comment 6

[Jayden]

I'll try to make a smaller testcase this weekend.  I didn't have time that that night to do so.

Comment 7

[Catalin Varga [QA][:VarCat]]

The  bug is still reproducible on FF 27 build id 20140109165205.

Comment 8

[Catalin Varga [QA][:VarCat]]

Attachment: testsimplified.html

Somehow simplified test case as easily to reproduce issue:

STR

1. Open the attached page.(Paul should be "first place" and John should be second place)
2. Set John as first place.

Expected:
John is set as first place and Paul is set as second place.

Actual:
Both places remain "first place" .

Comment 9

[Jayden]

This bug no longer seems to exist in 40.  Must have been fixed somewhere along the line.