RadListBox won't get Focus after transfer

[Felix]

I've built an .ascx control that contains a pair of RadListBoxes.  One represents the list of possible items, and the other represents the list of selected items.  Both RadListBoxes are assigned a tabIndex in the codebehind so that they are tab selectable.

        <telerik:RadListBox ID="UnSelectedItems" runat="server" Width="210px" Height="90px"
            SelectionMode="Multiple"
            OnKeyDown="UnSelectedItems_OnKeyDown(this, event)"
            ondblclick="PerformTransfer(this)" TransferToID="SelectedItems"
            EnableDragAndDrop="true"   CausesValidation="false" OnClick="GainFocus(this)"
            AllowTransfer="true">
            <ButtonSettings ShowTransferAll="false" Position="Right" />
        </telerik:RadListBox>


        <telerik:RadListBox ID="SelectedItems" runat="server" Width="210px" Height="90px"
            OnKeyDown="SelectedItems_OnKeyDown(this, event)"
            ondblclick="PerformTransfer(this)"
            SelectionMode="Multiple" EnableDragAndDrop="true" OnClick="GainFocus(this)"
            CausesValidation="false" AllowTransfer="true" TransferToID="UnSelectedItems">
            <ButtonSettings ShowTransfer="false" ShowTransferAll="false" Position="Right" />
        </telerik:RadListBox>

All of the built in transfers between them using the mouse to click on the arrow buttons works great.  For added usability, I'm binding OnKeyDown functions and OnDblClick functions.  The OnKeyDown functions just checks what key was pressed, and if it was the appropriate key it passes the "sender" parameter to PerformTransfer.  Here is PerformTransfer:

function PerformTransfer(sender) {
    var senderBox = $find(sender.id);

    if (sender.id.indexOf("UnSelectedItems") > -1) {
        var recieveBox = $find(sender.id.replace("UnSelectedItems", "SelectedItems"));
    } else if (sender.id.indexOf("SelectedItems") > -1) {
        var recieveBox = $find(sender.id.replace("SelectedItems", "UnSelectedItems"));
    }

    var itemArr = senderBox.get_selectedItems();

    if (itemArr.length == 0) { return; }

    for (var i = 0; i < itemArr.length; i++) {
        senderBox.transferToDestination(itemArr[i]);
    }

    itemArr[itemArr.length - 1].ensureVisible();
    recieveBox.clearSelection();
    senderBox._getGroupElement().focus();
}

This too works nearly perfectly.  But after I have performed a transfer from SelectedItems to UnSelectedItems using PerformTransfer, the SelectedItems listbox is not functionally focused.  I cannot use the up and down arrow keys to navigate or select items in this box.  I can tab forward to the next element, or backwards to the "UnSelectedItems" box (which still works fine).  Tabbing back and forth shows that "SelectedItems" is being focused, but not in such a way that I can used the keyboard to navigate it.  In order to make it navigable by keyboard again I must click on it (and then only after writing an onclick GainFocus function).

Oddly enough this problem only happens in the "SelectedItems" to "UnSelectedItems" direction.  It works fine in the other direction.

Thanks

--Felix

[Felix]

Upon further testing, I have found that this problem does not always occur.  I have not exactly nailed down the pattern of when the problem occurs, but I have found that it can be in either direction (SelectedItems -> UnSelectedItems or vice versa).  It seems that the problem happens when the sender box has significantly fewer items receiver box.

(As if this weren't a minute and bizarre problem enough already.)

I have been testing on Chrome 5.0 and IE 8.

I'm using Telerik 2010.1.519.35

[Genady Sergeev]

Hello Felix,

Please try using

$telerik.$(senderBox._getGroupElement()).focus();

instead of

senderBox._getGroupElement().focus();

I have tested it on a sample project that used your code and it seems to work fine.

Sincerely yours,
Genady Sergeev
the Telerik team