Xamarin.forms: [Bug, SearchHandler, iOS] SearchBoxVisibility="Collapsed" not working

[ArgusMagnus]

Description

When setting SearchHandler.SearchBoxVisibility to Collapsed on iOS. There is no way for the user to expand and interact with the search box. It's the same as Hidden.

Steps to Reproduce

1. Add a SearchHandler to a page
2. Set SearchBoxVisibility="Collapsed"
3. Try to interact with the search box, and observe that you cannot.

Basic Information

• Version with issue: Latest
• IDE: VS on Windows (latest)
• Platform Target Frameworks:
  
  
  
  • iOS: latest
  
  
  • Android: latest
  
  

[samhouts]

@ArgusMagnus Can you please attach a small project that demonstrates this issue? Thanks!

[mirosm]

You can reproduce this bug using the Xaminals shell sample (https://github.com/xamarin/xamarin-forms-samples/tree/master/UserInterface/Xaminals/). You will need to add SearchBoxVisibility="Collapsible" somewhere between lines 27-29 of the Xaminals\Views\MonkeysPage.xaml file.

[jsuarezruiz]

It seems that options Collapsible and Hidden are doing the same.

[eyadon]

I just added a search bar to an app on Xamarin Forms 4.2 and am disappointed to find that Collapsible is still not working right on iOS, but it seems to have switched from being same as Hidden to same as Expanded.
Collapsible on Android works exactly how I need it to, and I'd really like to see iOS catch up.

[JohnGalt1717]

On Android the search never shows up at all for me even when "Expanded" is chosen. In all cases there should be a search icon on the right side of the toolbar that tapping switches the title to a search box and lets you type like all of the normal apps out there.

Edit Also doesn't show up on iOS either.

Here's my layout:

`
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"
mc:Ignorable="d"
xmlns:views="clr-namespace:CADLearning.App.Views"
xmlns:controls="clr-namespace:CADLearning.App.Controls"
xmlns:services="clr-namespace:CADLearning.App.Services"
BackgroundColor="{DynamicResource HeaderBackground}"
FlyoutBackgroundColor="{DynamicResource HeaderBackground}"
x:Class="CADLearning.App.AppShell">

<!-- 
    Styles and Resources 
-->
<Shell.Resources>
    <ResourceDictionary>
        <Color x:Key="NavigationPrimary">#2196F3</Color>
        <Style x:Key="BaseStyle" TargetType="Element">
            <Setter Property="Shell.BackgroundColor" Value="{DynamicResource Background}" />
            <Setter Property="Shell.ForegroundColor" Value="{DynamicResource Foreground}" />
            <Setter Property="Shell.TitleColor" Value="{DynamicResource Foreground}" />
            <Setter Property="Shell.DisabledColor" Value="{DynamicResource DisabledForeground}" />
            <Setter Property="Shell.UnselectedColor" Value="{DynamicResource UnselectedForeground}" />
            <Setter Property="Shell.TabBarBackgroundColor" Value="{DynamicResource HeaderBackground}" />
            <Setter Property="Shell.TabBarForegroundColor" Value="{DynamicResource Foreground}"/>
            <Setter Property="Shell.TabBarUnselectedColor" Value="{DynamicResource UnselectedForeground}"/>
            <Setter Property="Shell.TabBarTitleColor" Value="{DynamicResource Foreground}"/>
        </Style>
        <Style TargetType="Tab" BasedOn="{StaticResource BaseStyle}" />
        <Style x:Key="FlyoutItemLabelStyle" TargetType="Label">
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="TextColor" Value="{DynamicResource Foreground}"/>
            <Setter Property="VerticalOptions" Value="Center"/>
        </Style>
    </ResourceDictionary>
</Shell.Resources>

<Shell.FlyoutHeader>
    <controls:FlyoutHeader/>
</Shell.FlyoutHeader>
<Shell.SearchHandler>
    <services:CADLearningSearchHandler Placeholder="Search..." ShowsResults="True" DisplayMemberName="Name" SearchBoxVisibility="Expanded" QueryIcon="search.png" QueryIconHelpText="Search" IsSearchEnabled="true">
        <services:CADLearningSearchHandler.ItemTemplate>
            <DataTemplate>
                <StackLayout Orientation="Horizontal">
                    <Image Source="play.png" HeightRequest="24" WidthRequest="24" VerticalOptions="Center" Margin="0,0,5,0"/>
                    <Label Grid.Column="1" Text="{Binding Name}" Style="{DynamicResource FlyoutItemLabelStyle}" VerticalOptions="Center" />
                </StackLayout>
            </DataTemplate>
        </services:CADLearningSearchHandler.ItemTemplate>
    </services:CADLearningSearchHandler>
</Shell.SearchHandler>
<Shell.ItemTemplate>
    <DataTemplate>
        <StackLayout Padding="5,15,5,0" Orientation="Horizontal">
            <Image Source="{Binding FlyoutIcon}" HeightRequest="24" WidthRequest="24" VerticalOptions="Center" Margin="0,0,5,0"/>
            <Label Grid.Column="1" Text="{Binding Title}" Style="{DynamicResource FlyoutItemLabelStyle}" VerticalOptions="Center" />
        </StackLayout>
    </DataTemplate>
</Shell.ItemTemplate>
<Shell.MenuItemTemplate>
    <DataTemplate>
        <StackLayout Padding="5,15,5,0" Orientation="Horizontal">
            <Image Source="{Binding FlyoutIcon}" HeightRequest="24" WidthRequest="24" VerticalOptions="Center" Margin="0,0,5,0"/>
            <Label Grid.Column="1" Text="{Binding Title}" Style="{DynamicResource FlyoutItemLabelStyle}" VerticalOptions="Center" />
        </StackLayout>
    </DataTemplate>
</Shell.MenuItemTemplate>

<!--Actual Items-->
<FlyoutItem Title="Home" Icon="home.png" Route="/">
    <Tab Title="Dashboard" Icon="workflow.png" Route="dashboard">
        <ShellContent ContentTemplate="{DataTemplate views:DashboardPage}"/>
    </Tab>
    <Tab Title="Goals" Icon="goal.png" Route="goals">
        <ShellContent ContentTemplate="{DataTemplate views:GoalsPage}"/>
    </Tab>
    <Tab Title="Playlists" Icon="playlist.png" Route="playlists">
        <ShellContent ContentTemplate="{DataTemplate views:PlaylistsPage}"/>
    </Tab>
</FlyoutItem>
<FlyoutItem Title="Library" Icon="library.png" Route="library">
    <ShellContent ContentTemplate="{DataTemplate views:LibraryPage}"/>
</FlyoutItem>
<FlyoutItem Title="Support" Icon="q.png" Route="support">
    <ShellContent ContentTemplate="{DataTemplate views:QPage}"/>
</FlyoutItem>
<FlyoutItem Title="Settings" Icon="settings.png" Route="settings">
    <ShellContent ContentTemplate="{DataTemplate views:SettingsPage}"/>
</FlyoutItem>
<MenuItem Text="Logout" Icon="login.png" x:Name="miLogout" Clicked="miLogout_Clicked"/>

`

[davidbritch]

I just tried this in Xamarin.Forms 4.4 and all three SearchBoxVisibility enumeration members are working as expected:

• Expanded shows the search box.
• Hidden hides the search box.
• Collapsible hides the search box until the user performs an action to reveal it. On iOS this is by vertically bouncing the page content (as if doing a pull to refresh on the CollectionView).

[davidbritch]

The source also says that the behavior is dependent upon iOS version:

        // Normally we dont want to do this unless this scrollview is vertical and its
        // element is the child of a Page with a SearchHandler that is collapsible.
        // If we can't bounce in that case you may not be able to expose the handler.
        // Also the hiding behavior only depends on scroll on iOS 11. In 10 and below
        // the search goes in the TitleView so there is nothing to collapse/expand.

[davidbritch]

@samhouts I'll update the docs as per above.

[RedChops]

In Xamarin 4.4.0.991265 I'm noticing a bit of a different issue, strictly in iOS:

• Expanded shows the search box.
• Hidden hides the search box.
• Collapsible causes the top navigation bar to turn white, now masking all text and icons. Search bar is present regardless of interaction, just like Expanded. Clicking on the search bar raises the bar up and the navigation bar color reappears. Clicking back out of the search box turns the navigation bar color white again.

[davidbritch]

Update: I have the problem @RedChops describes when I target iOS 13.3. When I target iOS 12.2 SearchBoxVisibility works as intended.

[RedChops]

Anything? This is still just as broken even on the current nightlies.

[BrianJSavage]

Latest Xamarin, search bar doesn't collapse, but works the same whether expanded or collapsible. Only hidden makes it disappear then you can't get it to display. What is the usage of hidden?
Edit:
If it helps anyone, I resolved the iOS not working as expected by using SearchBoxVisibility="Hidden" in the searchHandler, and then created my own search icon in the icon bar, when clicked:
if (searchBox.SearchBoxVisibility == SearchBoxVisibility.Hidden)
{
searchBox.SearchBoxVisibility = SearchBoxVisibility.Expanded;
}
else
{
searchBox.SearchBoxVisibility = SearchBoxVisibility.Hidden;
}
This has the advantage I could match the icon with other icons in the bar, not using the default search icon.
Works the same in Android now as well.