Selecting with mouse click does not work

[Iskander]

Hi,
I have a specific behavior I want to achieve with respect to the AutoCompleteBox.

Requirements:

1. When the box is empty the pop-up must suggest all options, much like a combo-box does
2. When the box gets focus, the pop-up must open and show the corresponding suggestions
3. Selection must be achieved through hitting enter key or clicking an item on the pop-up

Tried solution:

• Implement a FilteringBehavior to return all items when search text is empty

public class MyFilteringBehavior : FilteringBehavior
{
    public override IEnumerable<object> FindMatchingItems(string searchText, IList items, IEnumerable<object> escapedItems, string textSearchPath,
        TextSearchMode textSearchMode)
    {
        if (string.IsNullOrEmpty(searchText))
            return items.Cast<object>();
        return base.FindMatchingItems(searchText, items, escapedItems, textSearchPath, textSearchMode);
    }
}

•  Upon receiving a GotFocus event perform a Populate on the auto-complete box

private void Classes_GotFocus(object sender, RoutedEventArgs e)
{
    var box = (RadAutoCompleteBox) sender;
    box.Populate(box.SearchText);
    //box.IsDropDownOpen = true; // Not necessary
}

• Setting up the RadAutoCompleteBox on Xaml

<telerik:RadAutoCompleteBox Grid.Row="4" Grid.Column="2"
         Name="Classes"
         ItemsSource="{Binding Classes}"
         AutoCompleteMode="SuggestAppend"
         SelectionMode="Multiple"
         TextSearchMode="Contains"
         IsHighlighted="True"
         FilteringBehavior="{StaticResource MyFilteringBehavior}"
         GotFocus="Classes_GotFocus"/>

Expected behavior:

• Requirements 1 and 2 are achieved successfully
• With a highlighted item in the popup, hitting enter commits the selection into the box and closes the popup

Unexpected/unwanted effects:

• While cycling focus through a series of text boxes and auto complete boxes the first option gets selected when the tab key is hit
• Users cannot select any item while mouse-left-clicking on items in the pop-up

Is there any way to avoid the unwanted behavior while on this setup?

[Nasko]

Hi Iskander,

I will go straight yo your issues. The observed by you behavior of RadAutoCompleteBox is caused when the control does not get populated as expected inside the GotFocus event. So, what you need to do is when the Populate method gets called inside the GotFocus event you need first to check if the DropDown is not opened, as shown below:

private void RadAutoCompleteBox_GotFocus(object sender, RoutedEventArgs e)
{
    var autoCompleteBox = sender as RadAutoCompleteBox;
    if (autoCompleteBox != null && !autoCompleteBox.IsDropDownOpen)
    {
        autoCompleteBox.Populate(autoCompleteBox.SearchText);
    }
}

About your second issues concerning the Tab selection. What we could suggest in order to prevent the item to be selected when tab gets pressed and the DropDown is open is to handle the PreviewKeyDown event of the control and implement the following logic:

private void CustomRadAutoCompleteBox_PreviewKeyDown(object sender, KeyEventArgs e)
{
    var box = (RadAutoCompleteBox)sender;

    if (e.Key == Key.Tab && box.IsDropDownOpen)
    {
        var textBox = box.ChildrenOfType<RadWatermarkTextBox>().FirstOrDefault();
        if(textBox != null)
        {
            textBox.MoveFocus(new TraversalRequest(FocusNavigationDirection.Down));
        }

        e.Handled = true;
    }
}

So, basically when the tab key is pressed and the DropDown is opened the focus will be moved to the next UIElement.

Hope this helps.

Regards,
Nasko
Telerik

[Iskander]

Thanks Nasko

 I'll try this solution promptly and give you feedback.

[Nasko]

Hi Iskander,

Take as much as time as you need to check the proposed approaches.

Meanwhile, if you have any additional questions or concerns regarding Telerik controls, please do not hesitate to contact us.

Regards,
Nasko
Telerik

[Iskander]

It worked perfect

Following your instructions I finally did the following

private void Classes_GotFocus(object sender, RoutedEventArgs e)
{
    var box = (RadAutoCompleteBox) sender;
    if (!box.IsDropDownOpen)
    {
        box.Populate(box.SearchText);
    }
}
private void Classes_PreviewKeyDown(object sender, KeyEventArgs e)
{
    var box = (RadAutoCompleteBox) sender;
    if (box.IsDropDownOpen && e.Key == Key.Tab)
    {
        var textBox = box.ChildrenOfType<RadWatermarkTextBox>().FirstOrDefault();
        if (textBox != null)
        {
            if (e.KeyboardDevice.Modifiers == ModifierKeys.Shift)
            {
                textBox.MoveFocus(new TraversalRequest(FocusNavigationDirection.Previous));
                e.Handled = true;
            }
            else if (e.KeyboardDevice.Modifiers == ModifierKeys.None)
            {
                textBox.MoveFocus(new TraversalRequest(FocusNavigationDirection.Next));
                e.Handled = true;
            }
        }
    }
}

I just added conditions for Tab and Shift+Tab key combinations.

 

Thanks Nasko

[Nasko]

Hello Iskander,

I am glad to hear the proposed approach worked for you and thank you for sharing with the community your final implementation.

If you have any additional questions or concerns regarding Telerik controls, please do not hesitate to contact us.

Regards,
Nasko
Telerik

[Vinod]

I tried same code, but User cannot seelct any items while left clicking on items in the pop-up with mouse.

Can you please check , why item is not selected when user selects  mouse left click.

[Vinod]

Thanks...

its working for me by placing "!radAutoCompleteBox.IsDropDownOpen" condition...

[Rajesh]

Hi

For RadAutoCompleteBox, the selection of items is not working for mouse left click.

Can you give me some guidance on how to achieve this functionality

 

Thanks,

Rajesh

[Nasko]

Hello Rajesh,

Could you please, provide some more information about your scenario? Are you populating the AutoCompleteBox with items when you focus it. If that is the case please, check if t you have the condition for the IsDropDownOpen property:

private void auto_GotFocus(object sender, RoutedEventArgs e)
{
    var autoCompleteBox = sender as RadAutoCompleteBox;
    if (autoCompleteBox != null && !autoCompleteBox.IsDropDownOpen)
    {
        autoCompleteBox.Populate(autoCompleteBox.SearchText);
    }
}

However, if that is not the case with your scenario, please isolate the issue in a sample project and send it to us - thus we could be able to investigate it further and provide you with a prompt solution.

Hope this helps.

Regards,
Nasko
Telerik by Progress