Focus problem with listbox

[ProcessTest]

We are having a kind of a strange problem.

We're making a mover control and having some trouble with it ( a mover control consists of two listboxes with buttons to swap items back and forth between them). We modified a code we got off the net and it works fine (it works by recreating the option lists of both listboxes from scratch on each swap). The problem is that in doing that the selectedindex gets lost and the scrollbar of the listbox
focuses on the first option each time a swap is done.

We overcame this by the following code

var selectedIndex;
selectedIndex=fbox.selectedIndex
//code to carry out the swap left out due to length !!
fbox.selectedIndex = selectedIndex;
alert(fbox.selectedIndex); //testing purposes
fbox.selectedIndex = (selectedIndex);

and this works fine, but as soon as we comment off the alert function it stops working (focus goes to the top of the listbox ) !!

We suspect the problem has to do with the fact that the alert takes the focus away from the listbox and gives it back after, but we haven't been able to recreate this without actually calling the alert function. We tried to blur() and focus() in place of the alert but this didn't work.

-------------

You can check out the code below if needed, though we assumed the pseudocode above was sufficient :)

function move(fbox, tbox)
{

var selectedIndex;
var noMoved=0;
var arrFbox = new Array();
var arrTbox = new Array();
var arrLookup = new Array();
var i;

for (i = 0; i < tbox.options.length; i++)
{
var key = tbox.options[i].text + ":" + tbox.options[i].value;
arrLookup[key] = tbox.options[i].value;
arrTbox[i] = key;
}

var fLength = 0;
var tLength = arrTbox.length;

for(i = 0; i < fbox.options.length; i++)
{
var key = fbox.options[i].text + ":" + fbox.options[i].value;
arrLookup[key] = fbox.options[i].value;
if (fbox.options[i].selected && fbox.options[i].value != "")
{
arrTbox[tLength] = key;
tLength++;
noMoved++;
selectedIndex = fLength-1;
}
else
{
arrFbox[fLength] = key;
fLength++;
}
}
arrFbox.sort();
arrTbox.sort();
fbox.length = 0;
tbox.length = 0;
var c;

for(c = 0; c < arrFbox.length; c++)
{
var no = new Option();
no.value = arrLookup[arrFbox[c]];
var key = arrFbox[c];
var nameLength = key.indexOf(":");
if(nameLength > 0)
{
var name = key.substr(0,nameLength);
no.text = name;
}
else
{
no.text = arrFbox[c];
}
fbox[c] = no;
}

for(c = 0; c < arrTbox.length; c++)
{
var no = new Option();
no.value = arrLookup[arrTbox[c]];
var key = arrTbox[c];
var nameLength = key.indexOf(":");
if(nameLength > 0)
{
var name = key.substr(0,nameLength);
no.text = name;
}
else
{
no.text = arrTbox[c];
}
tbox[c] = no;
}

if(selectedIndex!= -1)
{
fbox.selectedIndex = selectedIndex;
if(selectedIndex != 0)
{
fbox.selectedIndex = (selectedIndex-1);
alert(selectedIndex);
fbox.selectedIndex = (selectedIndex);
}
}
}

[Khalid Ali]

Here is a suggestion.

store the currently selected index in a variable,

when you recreate the listbox,set the currently selected item based upon the variable value.Should you need more help on this,post a link to your page where you have all the html and javascript implemented.

[ProcessTest]

Thanks for the response, but we're already doing that !! :)

To repeat the code fragement in our post:

var selectedIndex;
selectedIndex=fbox.selectedIndex
//code to carry out the swap left out due to length !!
fbox.selectedIndex = selectedIndex;
alert(fbox.selectedIndex); //testing purposes
fbox.selectedIndex = (selectedIndex);

We are saving the selectedindex of the listbox in the 2nd line. Recreation of the listbox happens in the section commented left out in the 3rd line. Finally we are reassigning it at the end (line 6).

Our problem is that the code WORKS ONLY AS LONG AS THE ALERT FUNCTION (line 5) IS LEFT UNCOMMENTED !! Once we comment it we start getting focus back to the top of the listbox.

Sorry if we were unclear or anything earlier :).