OnKeypress client event not firing in Firefox, Chrome

[John]

I have a couple of RadListBox controls on a page configured to use the Listbox\ Transfer functionality as outlined in this Demo.

I have bound an "onkeypress" event to both listboxes in the code behind. Thus

lstFirstListBox.Attributes.Add("onkeypress", "filterListBox('" + lstFirstListBox.ClientID + "', event);");
lstSecondListBox.Attributes.Add("onkeypress", "filterListBox('" + lstSecondListBox.ClientID + "', event);");

similar to this Forum Thread and the attached example.

The problem I have encountered is that the 'onkeypress" event does not fire in Firefox. It fires in IE without any problems.

However, it will fire in Firefox after I transfer an item from one listbox to the other. In this case it does not metter which listbox has focus the event is fired on 'FirstListBox" every time. That is, I transfer an item from First to Second and then perform a key press, it fires on First. I tranfer an item from Second to First and then perform a keypress, it fires on First.

For testing I have limited the "filterListBox" function to pop up an alert with the first parameter which, apart from in IE, is always the FirstListBox clientID.

I also tried binding the event using jQuery and got the exact same behaviour.

The event does seem to fire at all in Chrome or Safari no matter what combination of clicks or trickery I attempt.

Any ideas would be greatly appreciated.

[Bozhidar]

Hi John,

The keypress event isn't the right choice for this purpose. It only fires when an actual character is being inserted in, for instance, a text input. Please take a look at this article explaining the differences between the keyboard events, and how they should be used.
 
Greetings,
Bozhidar
the Telerik team

[John]

Thanks Bozhidar,
The article was very informative and I did learn something from it about these events.

However the problem persists and the behaviour is exactly the same as in the original post
whether I use the the keypress, keydown or keyup events. I cannot use the textinput event
on the listbox obviously as it doesn't accept input.

The weird thing is that the event does fire in Firefox but only after transferring an item
and then only on the First ListBox.

Any Ideas or suggestions greatly appreciated.
Thanks again,
John

[Bozhidar]

Hello John,

Have you set the TabIndex property of the ListBox? If the property isn't set, the ListBox cannot receive focus, and therefore cannot catch the key events. Try setting the property (for instance TabIndex="1")
 
Greetings,
Bozhidar
the Telerik team

[John]

Thanks Bozhidar,
Thanks for your continued help. I tried setting Tabindex but the behaviour is still the same.

Regards,
John

[Bozhidar]

Hi John,

Please see the attached page. Click with the mouse inside the ListBox, or tab to it with the Tab key, so that it has focus. Then press any key, and you will see an alert.
 
Regards,
Bozhidar
the Telerik team

[John]

Hi Bozhidar,
Thanks for that, works as expected. It seems though that the problem occurs when you have
2 listboxes on the page configured to use the listbox transfer functionality as described in the demo referenced
in the original post.

Thanks again for your assistance with this, much appreciated.

Regards,
John

[Bozhidar]

Hello John,

I've put a second ListBox on the page and configured both of them so that they have the transfer functionality, and still everything works as expected. Please modify the page so that the listboxes look like this:

<telerik:RadListBox TabIndex="1" ID="RadListBox1" runat="server" AllowTransfer="true" TransferToID="RadListBox2">
    <Items>
        <telerik:RadListBoxItem Text="item" />
        <telerik:RadListBoxItem Text="item" />
        <telerik:RadListBoxItem Text="item" />
        <telerik:RadListBoxItem Text="item" />
        <telerik:RadListBoxItem Text="item" />
        <telerik:RadListBoxItem Text="item" />
    </Items>
</telerik:RadListBox>
<telerik:RadListBox TabIndex="1" ID="RadListBox2" runat="server">
    <Items>
        <telerik:RadListBoxItem Text="item" />
        <telerik:RadListBoxItem Text="item" />
        <telerik:RadListBoxItem Text="item" />
        <telerik:RadListBoxItem Text="item" />
        <telerik:RadListBoxItem Text="item" />
        <telerik:RadListBoxItem Text="item" />
    </Items>
</telerik:RadListBox>

On my end this works perfectly. If your case is different, please post the code for it, as well as a specific explanation of the behavior you observe.
 
Regards,
Bozhidar
the Telerik team