[Bug] Shell SearchHandler blocks touch to view

[davidortinau]

Description

I have the following ContentPage that implements a SearchHandler to filter the CollectionView items source on the page. I set the ShowsResults to false, however there's still a view being displayed over the page preventing touches from getting to my CollectionView.

Steps to Reproduce

public partial class PapersPage : ContentPage
    {
        public PapersPage()
        {
            InitializeComponent();

            BindingContext = new PapersViewModel();

            Shell.SetSearchHandler(this,
                new PaperSearchHandler() { VM = (BindingContext as PapersViewModel) });
        }

    }

    class PaperSearchHandler : SearchHandler
    {
        public PapersViewModel VM { get; set; }

        public PaperSearchHandler()
        {
            SearchBoxVisibility = SearchBoxVisibility.Expanded;
            ShowsResults = false;
        }

        protected override void OnQueryChanged(string oldValue, string newValue)
        {
            base.OnQueryChanged(oldValue, newValue);
            if (string.IsNullOrEmpty(newValue))
            {
                //ItemsSource = null;
                VM.FilterPapers(string.Empty);
            }
            else
            {
                VM.FilterPapers(newValue);
            }
        }
    }

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:vm="clr-namespace:WhitePaperBible.ViewModels"
    mc:Ignorable="d"
    x:Class="WhitePaperBible.Views.PapersPage"
    Title="Papers">
    <CollectionView
        x:Name="cv"
        ItemsSource="{Binding Papers}">
        <CollectionView.ItemsLayout>
            <GridItemsLayout
                Orientation="Vertical"
                Span="1" />
        </CollectionView.ItemsLayout>
        <CollectionView.EmptyView>
            <StackLayout>
                <Label
                    HorizontalOptions="CenterAndExpand"
                    VerticalOptions="CenterAndExpand"
                    Text="Loading Papers" />
            </StackLayout>
        </CollectionView.EmptyView>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <ContentView
                    Padding="10">
                    <Frame
                        HasShadow="false"
                        BackgroundColor="#f1f1f1"
                        OutlineColor="#f2f2f2"
                        Padding="15,8"
                        CornerRadius="4">
                        <StackLayout
                            Padding="0">
                            <Label
                                FontSize="15"
                                MaxLines="1"
                                TextColor="Black"
                                d:Text="{Binding .}"
                                Text="{Binding title}" />
                            <Label
                                FontSize="11"
                                TextColor="Gray"
                                d:Text="Sally Someone"
                                Text="{Binding Author.Name}" />
                        </StackLayout>
                    </Frame>
                    <ContentView.GestureRecognizers>
                        <TapGestureRecognizer
                            Command="{Binding PaperSelectedCommand,
                                Source={RelativeSource AncestorType={x:Type vm:PapersViewModel}}}"
                            CommandParameter="{Binding .}"/>
                    </ContentView.GestureRecognizers>
                </ContentView>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

Expected Behavior

Everything works as it does not, but the content of the page isn't behind a partially transparent view that blocks my touches.

Actual Behavior

Touches are blocked.

Basic Information

• Version with issue: 4.6-pre2
• Platform Target Frameworks:
  • iOS: 13.x

Screenshots

https://www.screencast.com/t/hciTVvHnU

Reproduction Link

https://github.com/davidortinau/wpbf/tree/bugs/search/WhitePaperBible

[varyamereon]

@davidortinau did you find a workaround? For example a way of dismissing the transparent view when the query is confirmed? I am trying to accomplish the same thing and am experiencing the same issue on iOS.

[davidortinau]

For the moment I abandoned the SearchHandler and added a SearchBar. https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/searchbar

[kazo0]

Running into the same issue. Calling Unfocus() in OnQueryConfirmed doesn't seem to do anything

[kazo0]

Looking at ShellPageRendererTracker.AttachSearchController(), if we were to set _searchController.ObscuresBackgroundDuringPresentation = false; then the main view seems to stay in focus since there is no longer a dimmed view overlaying on top of it. Although, the search bar seems to be stuck in "search mode" where you can no longer see the page title but the search term stays:

[kazo0]

Looks like we need to set SearchController.Active = false when losing focus, I can make a PR

[demoh2019]

any Update?

[varyamereon]

So I am not sure what is happening with this. The fix here has been ready to go for a while but nothing is being merged it seems any more. Based on the pull request I have created my own CustomShellPageRenderer with an override like this:

protected override void OnSearchHandlerPropertyChanged(object sender, PropertyChangedEventArgs e)
{
	var _searchController= ViewController.NavigationItem.SearchController;

	if (sender is SearchHandler searchHandler && _searchController != null)
	{
		if (e.PropertyName == SearchHandler.ClearPlaceholderEnabledProperty.PropertyName)
			_searchController.SearchBar.ShowsBookmarkButton = searchHandler.ClearPlaceholderEnabled;
		else if (e.PropertyName == SearchHandler.SearchBoxVisibilityProperty.PropertyName)
			UpdateSearchVisibility(_searchController);
		else if (e.PropertyName == SearchHandler.IsSearchEnabledProperty.PropertyName)
			UpdateSearchIsEnabled(_searchController);
		else if (e.PropertyName == SearchHandler.IsFocusedProperty.PropertyName)
		{
			if (!searchHandler.IsFocused)
				_searchController.Active = false;
		}
	}
}

Seems to work for me as a workaround.

[NilkOne]

Hello @varyamereon, I can't seem to use your solution.

Can you share your complete CustomShellPageRenderer code file please ?
And how do you use it ?

[varyamereon]

Sure thing. You need a CustomShellPageRendererTracker.cs in your iOS project that looks like this:

namespace MyProject.iOS.Renderers
{
	public class CustomShellPageRendererTracker : ShellPageRendererTracker
	{
		public CustomShellPageRendererTracker(IShellContext context) : base(context)
		{
		}

		protected override void OnSearchHandlerPropertyChanged(object sender, PropertyChangedEventArgs e)
		{
			var _searchController = ViewController.NavigationItem.SearchController;

			if (sender is SearchHandler searchHandler && _searchController != null)
			{
				if (e.PropertyName == SearchHandler.ClearPlaceholderEnabledProperty.PropertyName)
					_searchController.SearchBar.ShowsBookmarkButton = searchHandler.ClearPlaceholderEnabled;
				else if (e.PropertyName == SearchHandler.SearchBoxVisibilityProperty.PropertyName)
					UpdateSearchVisibility(_searchController);
				else if (e.PropertyName == SearchHandler.IsSearchEnabledProperty.PropertyName)
					UpdateSearchIsEnabled(_searchController);
				else if (e.PropertyName == SearchHandler.IsFocusedProperty.PropertyName)
				{
					if (!searchHandler.IsFocused)
						_searchController.Active = false;
				}
			}
		}
	}
}

and a CustomShellRenderer.cs that implements it also in your iOS project:

[assembly: ExportRenderer(typeof(MyShellPage), typeof(CustomShellRenderer))]
namespace MyProject.iOS.Renderers
{
	public class CustomShellRenderer : ShellRenderer
	{
		protected override IShellPageRendererTracker CreatePageRendererTracker() => new CustomShellPageRendererTracker(this);
	}
}

Hope that helps. Here's hoping for an official solution some day.

[NilkOne]

Thanks @varyamereon, it works like a charm :-)

[jfversluis]

Hey everyone! Sorry this took a while. Looking to merge this now and should be available in the next update :)