Nested RadListBox do not handle focus properly

[David]

I have a UI where I have use a RadListBox who's items are also RadListBoxes.  Thus nested RadListBoxes.

The focus behavior seems broken in this arrangement and does not match ListBox (or any sort of expected) focus behavior.

I've attached a project that illustrates the differences.  Compile and run the project and you will see a window with two columns.  On the left is the arrangement I describe constructed from ListBoxes and the right from RadListBoxes.  Try clicking to select items from the inner list boxes and the outer list box items on both and observe the differences in behavior.

I have hooked up LostFocus and GotFocus events to the outter listbox items to show how the RadListBox (unlike the ListBox) does not properly cause a LostFocus when you click on an outter list box item once an innter one is selected.  This also exhibits the "difficulty" in selecting these elements when the RadListBox is used.

I made a repo and attached an image to make it more clear what I'm doing.

The repo project itself can be downlaoded here: https://www.dropbox.com/s/axz897egh6wkvgf/RadListBoxFocusIssue.zip?dl=0

This seems to be a bug or design deficiency which is preventing me from properly using Telerik controls.  Or am I doing something wrong?

[Kalin]

Hi David,

Can you please the exact step to reproduce the explained different behavior and the exact version of the controls you are using? I tested the scenario with the latest version of the control and was not able to observe anything unexpected.

I'm looking forward to hearing from you.

Regards,
Kalin
Telerik

 

 

[David]

I apologize that I wasn't clear.  And, further, I had some issues in my repo that confused the matter.  I've since fixed the repo project which you can download here:

https://www.dropbox.com/s/axz897egh6wkvgf/RadListBoxFocusIssue.zip?dl=0

And to illustrate precisely what it is not behaving properly, since it is very hard to explain precisely in words, I made the following screen cast:

http://screencast.com/t/y8kdqyAq

David

[Kalin]

Hello David,

Thanks for the further details and video. We have managed to reproduce the issue on our side and I logged it in our Feedback portal where you can track its status. You can find the item on the link below:
http://feedback.telerik.com/Project/143/Feedback/Details/154508-radlistbox-placed-inside-of-radlistboxitem-doesnt-lose-focus-when-clicked-on-th

I apologize for any inconvenience caused. I have also updated your Telerik points for your involvement.

Regards,
Kalin
Telerik

 

 

[David]

So this is a complete roadblock for me.  Any progress on sorting it out?  I've not figured out a workaround either.

[Kalin]

Hello David,

We did investigated the issue and find a suitable work around - you would need to inherit from RadListBoxItem and override its TryFocus method as shown below:

public class CustomListBoxItem : RadListBoxItem
{
    protected override void TryFocus()
    {
        var focusedElement = FocusManagerHelper.GetFocusedElement(this) as UIElement;
        if (focusedElement == null ||
            !(focusedElement != this &&
            this.IsAncestorOf(focusedElement) &&
            !(focusedElement is RadListBoxItem)))
        {
            this.Focus();
        }
    }
}

I have also modified the attached project in order to demonstrate the exact approach.

As for the fix - we haven't planned it for fixing yet, however I hope the workaround will be suitable for you.

Please let me know if achieves the required behavior.

Regards,
Kalin
Telerik

 

 

[David]

This is great, but how do you tell the RadListBox to use the CustomListBoxItem instead of the RadListBoxItem?

[Kalin]

Hello David,

If you need to use the custom RadListBoxItem when binding the ItemsSource you would need to implement a custom RadListBox and override the following methods:

public class CustomListBox : RadListBox
{
    protected override DependencyObject GetContainerForItemOverride()
    {
        return new CustomListBoxItem();
    }

    protected override bool IsItemItsOwnContainerOverride(object item)
    {
        return item is CustomListBoxItem;
    }
}

Hope this helps.

Regards,
Kalin
Telerik