[Solved] AutoComplete control problem.

[Wojtek]

Hey,

I'm having a problem with auto complete control for Maui (this is Windows desktop app). In our app we have a view caching system which basically makes it a SPA application (what we do is we change the Contnet property dynamically of the container that should contain our views). The problem is as follows. Whenever we navigate between any view and back to the view where autocomplete resides, the keyboard navigation is treated as if it was attached once more (that's my assumption) - meaning that when we did one cycle of navigation (go to another view and back), trigger auto completion and press arrow down on keyboard it jumps two records down instead of one. The problem is incremental so when we do for example 4 cycles of navigation and press arrow down key, we jump 4 items down and the 4th item is highlighted.

            var autoCompleteEntry = new RadAutoComplete
            {
                BindingContext = _viewModel,
                Placeholder = $"Szukaj {field.Label}...",
                FontSize = 16,
                TextColor = NeucaColors.Font_CardFrame,
                BackgroundColor = Colors.White,
                CompletionMode = AutoCompleteCompletionMode.Contains,
                SuggestMode = AutoCompleteSuggestMode.Suggest,
                NoResultsMessage = $"Brak wyników dla {field.Label}",
                SearchThreshold = 3,
            };

            autoCompleteEntry.SetBinding(RadAutoComplete.TextProperty, new Binding(
                nameof(UIFieldConfig.FilterValue),
                source: field,
                mode: BindingMode.TwoWay
            ));

            autoCompleteEntry.HighlightItemFunc = (filteredItems, searchText) => null;

            autoCompleteEntry.TextChanged += AutoCompleteEntryOnTextChanged(field.FieldName);

            autoCompleteEntry.Completed +=
                dataGridContext == UIDataGridContext.Account
                    ? AccountOnAutoCompleteEntryCompleted
                    : ClientOnAutoCompleteEntryCompleted;

            autoCompleteEntry.SuggestionItemSelected +=
                dataGridContext == UIDataGridContext.Account
                    ? AccountOnAutoCompleteEntryOnSuggestionItemSelected
                    : ClientOnAutoCompleteEntryOnSuggestionItemSelected;

            autoCompleteEntry.SetBinding(WidthRequestProperty, new Binding(
                nameof(AccountsClientsViewModel.IsEditMode),
                source: _viewModel,
                converter: new BoolToObjectConverter { TrueObject = 250, FalseObject = 300 }
            ));

            dataRow.Children.Add(autoCompleteEntry);

Unfortunately i cannot provide more than the control initialization.

[Didi]

Hi Wojtek,

Thank you for the provided code.

I tested in a sample app with page navigation and cannot reproduce the behavior. I will need a sample repro project for further researching the case. If you do not want to share the project here in the forum, open a support ticket and attach the project there.

Regards,
Didi
Progress Telerik

[Wojtek]

Hi, 

I'm attaching the sample app with recreated problem. (Run it on windows platform)

All you have to do is just switch between View1 and View2 atleast once. Start typing apple in the autocomplete control and press arrow key down, to select any suggestion. It will jump x rows where x is count of navigation cycle between views.

Best Regards,
Wojtek

[Wojtek]

Please see the attached app i provided in this thread.

[Didi]

Thank you for the project. I tested different scenarios and the behavior is provoked from the following custom code which I commented.

    ContentView GetOrCreateView(string viewName)
    {
       _viewCache.TryGetValue(viewName, out var view);
        if (view == null)
        {
            switch (viewName)
            {
                case "view1":
                    {
                        var view1 = new View1();
                      //  _viewCache.TryAdd(viewName, view1);
                        return view1;
                    }
                case "view2":
                    {
                        var view2 = new View2();
                       // _viewCache.TryAdd(viewName, view2);
                        return view2;
                    }
            }
        }

        return view;
    }

the state is stored with this cache, so the behavior is expected. Also if you enter text in the input and switching between views, the text is kept.

[Wojtek]

Right.

As I've stated in my first comment, this is our caching view system so we don't have to reinitilize the view everytime user enters it. We just grab it from the cache with its persisted state, that's the desired behavior for us. So it doesn't really solve my problem, cause i cannot simply change the whole navigation architecture for couple of controls.

I can only guess but my assumption is that keyboard navigation handler gets attached everytime the control is loaded?

Is there any other way we could solve this problem?

Looking forward to hear from you Didi.

Best Regards,
Wojtek

[Didi]

Hello Wojtek,

I tested different scenarios with different controls, and the behavior is related to the AutoComplete keyboard navigation. I have logged the issue on your behalf here: https://feedback.telerik.com/maui/1715651-autocomplete-winui-keyboard-navigation-in-the-suggestion-view-behaves-wrong-when-using-caching-system-and-navigating-between-views and updated your Telerik points as a small sign of gratitude for bringing this issue to our attention.

As a solution, I can suggest you use the RadComboBox control with filtering and editable mode enabled. The ComboBox has a keyboard support and such behavior cannot be reproduced in it.

For the AutoComplete, I tried different scenarios still cannot find a workaround for this behavior.

Regards,
Didi
Progress Telerik

[Didi]

Hi Wojtek,

I am writing to let you know that I found a solution for the AutoComplete control. I have attached the View1.cs file with the implementation. Mainly, you need to access the inner RadCollectionView that is inside the RadAutoComplete.SuggestionView and focusing the first element.

Hope this helps.

Regards,
Didi
Progress Telerik