Selecting with mouse click does not work

10 posts, 1 answers
  1. Iskander
    Iskander avatar
    3 posts
    Member since:
    Jun 2008

    Posted 01 Feb 2016 Link to this post

    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?

  2. Answer
    Nasko
    Admin
    Nasko avatar
    681 posts

    Posted 02 Feb 2016 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Iskander
    Iskander avatar
    3 posts
    Member since:
    Jun 2008

    Posted 02 Feb 2016 in reply to Nasko Link to this post

    Thanks Nasko

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

  4. Nasko
    Admin
    Nasko avatar
    681 posts

    Posted 03 Feb 2016 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Iskander
    Iskander avatar
    3 posts
    Member since:
    Jun 2008

    Posted 09 Feb 2016 Link to this post

    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

  6. Nasko
    Admin
    Nasko avatar
    681 posts

    Posted 09 Feb 2016 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Vinod
    Vinod avatar
    7 posts
    Member since:
    Jul 2016

    Posted 04 Jul 2016 Link to this post

    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.

  8. Vinod
    Vinod avatar
    7 posts
    Member since:
    Jul 2016

    Posted 04 Jul 2016 Link to this post

    Thanks...

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

  9. Rajesh
    Rajesh avatar
    1 posts
    Member since:
    Feb 2017

    Posted 22 Feb Link to this post

    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

  10. Nasko
    Admin
    Nasko avatar
    681 posts

    Posted 22 Feb Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top