Selecting with mouse click does not work

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

    Posted 01 Feb 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
    587 posts

    Posted 02 Feb 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. UI for WPF is Visual Studio 2017 Ready
  4. Iskander
    Iskander avatar
    3 posts
    Member since:
    Jun 2008

    Posted 02 Feb in reply to Nasko Link to this post

    Thanks Nasko

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

  5. Nasko
    Admin
    Nasko avatar
    587 posts

    Posted 03 Feb 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
  6. Iskander
    Iskander avatar
    3 posts
    Member since:
    Jun 2008

    Posted 09 Feb 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

  7. Nasko
    Admin
    Nasko avatar
    587 posts

    Posted 09 Feb 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
  8. Vinod
    Vinod avatar
    7 posts
    Member since:
    Jul 2016

    Posted 04 Jul 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.

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

    Posted 04 Jul Link to this post

    Thanks...

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

Back to Top
UI for WPF is Visual Studio 2017 Ready