changed filter & filter items search logic

Author: w-ahmad

src/TableViewColumnHeader.OptionsFlyoutViewModel.cs

@@ -52,16 +52,7 @@ private void InitializeCommands()
             OkCommand.ExecuteRequested += delegate
             {
                 ColumnHeader.HideFlyout();
-
-                if (ColumnHeader!._selectAllCheckBox!.IsChecked is true && string.IsNullOrEmpty(FilterText))
-                {
-                    ColumnHeader.ClearFilter();
-                }
-                else
-                {
-                    SelectedValues = FilterItems.Where(x => x.IsSelected).Select(x => x.Value).ToList();
-                    ColumnHeader.ApplyFilter();
-                }
+                ColumnHeader.ApplyFilter();
             };
 
             CancelCommand.ExecuteRequested += delegate { ColumnHeader.HideFlyout(); };
@@ -103,16 +94,6 @@ private void OnFilterItemPropertyChanged(object? sender, PropertyChangedEventArg
             SetSelectAllCheckBoxState();
         }
 
-        /// <summary>
-        /// Clears the filter text.
-        /// </summary>
-        internal void ClearFilterText()
-        {
-            _canFilter = false;
-            FilterText = default;
-            _canFilter = true;
-        }
-
         /// <summary>
         /// Gets the TableView associated with the ViewModel.
         /// </summary>
@@ -123,30 +104,6 @@ internal void ClearFilterText()
         /// </summary>
         public TableViewColumnHeader ColumnHeader { get; }
 
-        /// <summary>
-        /// Gets or sets the filter text.
-        /// </summary>
-        public string? FilterText
-        {
-            get => _filterText;
-            set
-            {
-                _filterText = value;
-                OnFilterItemsSearchTextChanged();
-                OnPropertyChanged();
-            }
-        }
-
-        /// <summary>
-        /// Handles the filter items search text changed event.
-        /// </summary>
-        private void OnFilterItemsSearchTextChanged()
-        {
-            if (!_canFilter) return;
-
-            FilterItems = TableView.FilterHandler.GetFilterItems(ColumnHeader.Column!, FilterText);
-        }
-
         /// <summary>
         /// Gets or sets the filter items.
         /// </summary>
@@ -168,7 +125,7 @@ public IList<TableViewFilterItem> FilterItems
         /// <summary>
         /// Gets the selected values for the filter.
         /// </summary>
-        public List<object> SelectedValues { get; private set; } = [];
+        public List<object> SelectedValues { get; set; } = [];
 
         /// <summary>
         /// Sets the state of the select all checkbox.
@@ -220,7 +177,7 @@ private void OnPropertyChanged([CallerMemberName] string? propertyName = default
         /// <summary>
         /// Gets the command to sort in descending order.
         /// </summary>
-        public StandardUICommand SortDescendingCommand { get; } = new() { Label = TableViewLocalizedStrings.SortDescending};
+        public StandardUICommand SortDescendingCommand { get; } = new() { Label = TableViewLocalizedStrings.SortDescending };
 
         /// <summary>
         /// Gets the command to clear sorting.
@@ -235,7 +192,7 @@ private void OnPropertyChanged([CallerMemberName] string? propertyName = default
         /// <summary>
         /// Gets the command to confirm the filter.
         /// </summary>
-        public StandardUICommand OkCommand { get; } = new() { Label = TableViewLocalizedStrings.Ok};
+        public StandardUICommand OkCommand { get; } = new() { Label = TableViewLocalizedStrings.Ok };
 
         /// <summary>
         /// Gets the command to cancel the filter.

src/TableViewColumnHeader.cs

@@ -42,6 +42,7 @@ public partial class TableViewColumnHeader : ContentControl
     private bool _resizeStarted;
     private double _resizeStartingWidth;
     private bool _resizePreviousStarted;
+    private TextBox? _searchBox;
 
     /// <summary>
     /// Initializes a new instance of the TableViewColumnHeader class.
@@ -125,10 +126,17 @@ private void ClearFilter()
     /// </summary>
     private void ApplyFilter()
     {
-        if (_tableView is not null)
+        if (_selectAllCheckBox?.IsChecked is true && string.IsNullOrEmpty(_searchBox?.Text))
         {
-            _tableView.FilterHandler.SelectedValues[Column!] = _optionsFlyoutViewModel.SelectedValues;
-            _tableView.FilterHandler?.ApplyFilter(Column!);
+            ClearFilter();
+        }
+        else if (_tableView is not null)
+        {
+            _optionsFlyoutViewModel.SelectedValues = [.. _optionsFlyoutViewModel.FilterItems.Where(x => x.IsSelected).Select(x => x.Value)];
+            {
+                _tableView.FilterHandler.SelectedValues[Column!] = _optionsFlyoutViewModel.SelectedValues;
+                _tableView.FilterHandler?.ApplyFilter(Column!);
+            }
         }
     }
 
@@ -186,7 +194,7 @@ protected override void OnApplyTemplate()
         }
 
         _optionsFlyout.Opening += OnOptionsFlyoutOpening;
-        _optionsFlyout.Closed += (s, e) => _optionsFlyoutViewModel.ClearFilterText();
+        _optionsFlyout.Closed += OnOptionsFlyoutClosed;
         _optionsButton.Tapped += OnOptionsButtonTaped;
         _optionsButton.DataContext = _optionsFlyoutViewModel = new OptionsFlyoutViewModel(_tableView, this);
 
@@ -208,26 +216,39 @@ protected override void OnApplyTemplate()
         }
 #endif
 
-        if (menuItem?.FindDescendant<AutoSuggestBox>(x => x.Name == "SearchBox") is { } searchBox)
+        if (menuItem?.FindDescendant<TextBox>(x => x.Name == "SearchBox") is { } searchBox)
         {
-            searchBox.PlaceholderText = TableViewLocalizedStrings.SearchBoxPlaceholder;
+            _searchBox = searchBox;
+            _searchBox.PlaceholderText = TableViewLocalizedStrings.SearchBoxPlaceholder;
+            _searchBox.TextChanged += OnSearchBoxTextChanged;
 #if WINDOWS
-            searchBox.PreviewKeyDown += OnSearchBoxKeyDown; 
+            _searchBox.PreviewKeyDown += OnSearchBoxKeyDown; 
 #else
-            searchBox.KeyDown += OnSearchBoxKeyDown;
+            _searchBox.KeyDown += OnSearchBoxKeyDown;
 #endif
         }
 
         SetFilterButtonVisibility();
         EnsureGridLines();
     }
 
+    /// <summary>
+    /// Handles the TextChanged event for the search box.
+    /// </summary>
+    private void OnSearchBoxTextChanged(object sender, TextChangedEventArgs e)
+    {
+        if (_tableView?.FilterHandler is not null)
+        {
+            _optionsFlyoutViewModel.FilterItems = _tableView.FilterHandler.GetFilterItems(Column!, _searchBox!.Text);
+        }
+    }
+
     /// <summary>
     /// Handles the KeyDown event for the search box.
     /// </summary>
     private void OnSearchBoxKeyDown(object sender, KeyRoutedEventArgs e)
     {
-        if (e.Key == VirtualKey.Enter && _optionsFlyoutViewModel is { FilterText.Length: > 0 })
+        if (e.Key == VirtualKey.Enter && _searchBox?.Text.Length > 0)
         {
             _optionsFlyoutViewModel.OkCommand.Execute(null);
 
@@ -256,12 +277,29 @@ private void OnSelectAllCheckBoxUnchecked(object sender, RoutedEventArgs e)
     /// <summary>
     /// Handles the Opening event for the options flyout.
     /// </summary>
-    private void OnOptionsFlyoutOpening(object? sender, object e)
+    private async void OnOptionsFlyoutOpening(object? sender, object e)
     {
         if (_tableView?.FilterHandler is not null)
         {
             _optionsFlyoutViewModel.FilterItems = _tableView.FilterHandler.GetFilterItems(Column!, null);
         }
+
+        if (_searchBox is not null)
+        {
+            await Task.Delay(100);
+            await FocusManager.TryFocusAsync(_searchBox, FocusState.Programmatic);
+        }
+    }
+
+    /// <summary>
+    /// Handles the Closed event for the options flyout.
+    /// </summary>
+    private void OnOptionsFlyoutClosed(object? sender, object e)
+    {
+        if (_searchBox is not null)
+        {
+            _searchBox.Text = string.Empty;
+        }
     }
 
     /// <summary>

src/Themes/TableViewColumnHeader.xaml

@@ -98,7 +98,7 @@
                                               VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                               HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
 
-                            <Grid HorizontalAlignment="Right">                                
+                            <Grid HorizontalAlignment="Right">
                                 <FontIcon x:Name="SortIcon"
                                           FontSize="10"
                                           Margin="0,2,0,0"
@@ -157,9 +157,7 @@
                                                                 <RowDefinition Height="Auto" />
                                                                 <RowDefinition Height="*" />
                                                             </Grid.RowDefinitions>
-                                                            <AutoSuggestBox x:Name="SearchBox"
-                                                                            QueryIcon="Find"
-                                                                            Text="{Binding FilterText, Mode=TwoWay}" />
+                                                            <TextBox x:Name="SearchBox" />
                                                             <Border Grid.Row="1"
                                                                     BorderThickness="0,0,0,1"
                                                                     BorderBrush="{ThemeResource MenuFlyoutSeparatorBackground}">
@@ -200,14 +198,18 @@
                                             <MenuFlyoutItem>
                                                 <MenuFlyoutItem.Template>
                                                     <ControlTemplate TargetType="MenuFlyoutItem">
-                                                        <Grid Margin="12,4" 
+                                                        <Grid Margin="12,4"
                                                               ColumnSpacing="16">
                                                             <Grid.ColumnDefinitions>
                                                                 <ColumnDefinition Width="*" />
                                                                 <ColumnDefinition Width="*" />
                                                             </Grid.ColumnDefinitions>
-                                                            <Button Command="{Binding OkCommand}" HorizontalAlignment="Stretch" Style="{StaticResource AccentButtonStyle}" />
-                                                            <Button Command="{Binding CancelCommand}" Grid.Column="1" HorizontalAlignment="Stretch" />
+                                                            <Button Command="{Binding OkCommand}"
+                                                                    HorizontalAlignment="Stretch"
+                                                                    Style="{StaticResource AccentButtonStyle}" />
+                                                            <Button Command="{Binding CancelCommand}"
+                                                                    Grid.Column="1"
+                                                                    HorizontalAlignment="Stretch" />
                                                         </Grid>
                                                     </ControlTemplate>
                                                 </MenuFlyoutItem.Template>