RadAutoCompleteBox in RadWindow

[Patrick]

Hello,
in my solution, I subscribe to the LostFocus event of a RadAutoCompleteBox, to force the user to use one of the values in the RadAutoCompleteBox.
This works fine... excepted when the RadAutoCompleteBox is inside a RadWindow. In this case, when the item is selected with the mouse in the drop down, the LostFocus event is raised. But not when the RadAutoCompleteBox is not in a RadWindow.
Patrick

[Kalin]

Hi Patrick,

We tested the explained scenario with RadAutoCompleteBox in RadWindow and it worked as expected. I have attached here our sample test project, so could you please try to modify it in order to reproduce the explained issue and send it back to us?

I'm looking forward to your response.

Regards,
Kalin
Telerik

[Patrick]

Hello Kalin and thank you for your answer.

What I wanted to do is the user selecting either an entry in the RadAutoCompleteBox or nothing.

So I have the following code in MainPage.xaml.cs:

using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using Telerik.Windows.Controls;
using Telerik.Windows.Controls.Primitives;

namespace WindowSL
{
  public partial class MainPage : UserControl
  {


    public MainPage()
    {
      InitializeComponent();
      var window = new RadWindow();
      window.Width = 400;
      window.Height = 400;
      var stackPanel = new StackPanel { Margin = new Thickness (10)};

      var autoComplete = new RadAutoCompleteBox {
        AutoCompleteMode = AutoCompleteMode.Suggest,
        ItemsSource = new List<string> { "aaa", "bbb", "ccc" },
        SelectionMode = AutoCompleteSelectionMode.Single,
        TextSearchMode = TextSearchMode.Contains
      };

      stackPanel.Children.Add(autoComplete);
      window.Content = stackPanel;
      autoComplete.LostFocus += autoComplete_LostFocus;

      window.Show();
    }


    void autoComplete_LostFocus(object sender, RoutedEventArgs e)
    {
      var AutoCompleteBox = (RadAutoCompleteBox)sender;
      if (AutoCompleteBox.SelectedItem == null)
      AutoCompleteBox.SelectedItem = "";
    }


  }
}

As you can see, this code does not work in a RadWindow, but it works perfectly outside of the RadWindow. The culprit is the LostFocus event being called when clicking on an entry in the former case, but not in the latter one.

Patrick

[Kalin]

Hello Patrick,

Please try to set the event handler in the following way and let us know if this works for you:

void autoComplete_LostFocus(object sender, RoutedEventArgs e)
{
    var autoCompleteBox = (RadAutoCompleteBox)sender;
    if (!string.IsNullOrEmpty(autoCompleteBox.SearchText))
    {
        autoCompleteBox.SearchText = "";
    }
}

If this doesn't resolve the issue, I will ask you to give us some more details on the desired behavior as we might have not understood you correctly.

Regards,
Kalin
Telerik

[Patrick]

Hello Kalin,
this solution doesn't work and it is confusing for the user. If I add a TextBox again, to have the possibility to change the focus.

It works correctly with the mouse:

1. Enter a in the auto complete box: this opens it and displays aaa in the drop down.
2. Click on aaa: the drop down closes and aaa is displayed in the edit.
3. Change the focus: aaa remains selected.

Now, with the keyboard:

1. Enter a in the auto complete box: this opens it and displays aaa in the drop down.
2. Press Tab: aaa is displayed in the auto complete box and the focus remains in the auto complete box (strange!!!!!)
3. Press Tab again: the auto complete box is cleared and the focus goes to the TextBox.

As you can see, it is not working correctly.

What I really want is that the user can only select nothing, aaa, bbb or ccc.
Note that my first solution works correctly... except in a RadWindow.

Patrick

[Kalin]

Hi Patrick,

We did test your solution inside and outside of RadWindow and worked the same way (with the latest version of our controls) - in both places when you click on the DropDown with the mouse the LostFocus event was called. As work-around to this you can just check the IsDropDownOpened property in order not to delete the SelectedItem when the DropDown is open. Please try the code-snippet below:

void autoComplete_LostFocus(object sender, RoutedEventArgs e)
{
    var autoCompleteBox = (RadAutoCompleteBox)sender;
    if (autoCompleteBox.SelectedItem == null && autoCompleteBox.IsDropDownOpen == false)
    {
        autoCompleteBox.SelectedItem = "";
    }
}

Hope this will help you.

Regards,
Kalin
Telerik

[Patrick]

Hello Kalin,
unfortunately, this solution does not work correctly: if I type a and click on the TextBox, a remains in the auto complete box. In this case, it should be replaced with an empty string.
Patrick

[Patrick]

Hello Kalin,
I've corrected the code to look more closely at the LostFocus and SelectionChanged events. When the auto complete box is inside a window, the events are LostFocus, SelectionChanged and LostFocus. When it is outside of a window, they are LostFocus and SelectionChanged.
When the LostFocus event is raised, the autoCompleteBox.SelectedItem property is always null, even after the SelectionChanged event is raised. So I think the problem is here.

Meanwhile, I don't understand why the LostFocus event is raised while we are still on the same control.

Patrick

.xaml file used:

<UserControl x:Class="WindowSL.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:system="clr-namespace:System;assembly=mscorlib"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

  <Grid Name="LayoutRoot"
              Background="White"
              Margin="5">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition />
    </Grid.RowDefinitions>

    <telerik:RadAutoCompleteBox Name="AutoComplete"
                                Margin="5"
                                SelectionMode="Single"
                                TextSearchMode="Contains" />

    <TextBox Margin="5"
             Grid.Row="1"/>

    <ListBox Name="LogListBox"
             Margin="5"
             Grid.Row="2" />

  </Grid>
</UserControl>

.cs file used:

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Controls;
using Telerik.Windows.Controls;
using Telerik.Windows.Controls.Primitives;

namespace WindowSL
{
  public partial class MainPage : UserControl
  {
    private ObservableCollection<String> Log;

    public MainPage()
    {
      InitializeComponent();
      var window = new RadWindow();
      window.Width = 400;
      window.Height = 400;

      Log = new ObservableCollection<string>();
      LogListBox.ItemsSource = Log;

      AutoComplete.ItemsSource = new List<string> { "aaa", "bbb", "ccc" };
      AutoComplete.LostFocus += autoComplete_LostFocus;
      AutoComplete.SelectionChanged += autoComplete_SelectionChanged;

      var stackPanel = new StackPanel { Margin = new Thickness(5) };

      var autoComplete = new RadAutoCompleteBox
      {
        AutoCompleteMode = AutoCompleteMode.Suggest,
        ItemsSource = new List<string> { "aaa", "bbb", "ccc" },
        Margin = new Thickness (5),
        SelectionMode = AutoCompleteSelectionMode.Single,
        TextSearchMode = TextSearchMode.Contains
      };
      autoComplete.LostFocus += autoComplete_LostFocus;
      autoComplete.SelectionChanged += autoComplete_SelectionChanged;
      stackPanel.Children.Add(autoComplete);

      var TextBox = new TextBox { Margin = new Thickness(5) };
      stackPanel.Children.Add(TextBox);

      window.Content = stackPanel;

      window.Show();
    }


    void autoComplete_LostFocus(object sender, RoutedEventArgs e)
    {
      var autoCompleteBox = (RadAutoCompleteBox)sender;
      Log.Add("LostFocus: " +
        (autoCompleteBox.SelectedItem == null ? "<no selected item>" : (String)autoCompleteBox.SelectedItem));
    }


    void autoComplete_SelectionChanged(object sender, RoutedEventArgs e)
    {
      var autoCompleteBox = (RadAutoCompleteBox)sender;
      Log.Add("SelectionChanged:" +
        (autoCompleteBox.SelectedItem == null ? "<no selected item>" : (String)autoCompleteBox.SelectedItem));
    }


  }
}

[Rosen Vladimirov]

Hello Patrick,

Thank you for the sample code. Let me share my understanding of your requirement - you need to give your users ability to select an item from the AutoCompleteBox, but if they enter a value that is not matching any of the entries (or they don't select anything) and change the focus to another element, you want to clear the entered text. Is this your requirement?
The problem with your code is that when RadAutoCompleteBox's DropDown is opened in RadWindow, it gets the focus. As the DropDown is a popup, when it is closed, Silverlight Framework is trying to restore the focus to the previous element (the textbox of RadAutoCompleteBox). As RadWindow is a Popup in Silverlight, the Framework first focuses an element in the MainPage if this is possible (with your code the framework selects the AutoComplete in the main page and than changes back to the AutoComplete in the window). That's the reason why in the messages you see two more entries for LostFocus event, in fact two of them are for the AutoComplete from the MainPage.

I would suggest you to try the following code in your LostFocus handler in order to achieve the desired functionality:

if (autoCompleteBox.SelectedItem == null && !string.IsNullOrEmpty(autoCompleteBox.SearchText))
{
    autoCompleteBox.SearchText = "";
}

Hopefully the above explanation makes sense for you. Could you try the above code and inform us if it helps? If I have misunderstood your requirement, could you give us more details?

I'm looking forward to hearing from you.

Regards,
Rosen Vladimirov
Telerik

[Patrick]

Hello Rosen,
thanks for you answer: it solves the problem!
Patrick