Picker does not gain focus on iOS

Maximilian Grabner 5

Hi
I am currently migrating our Xamarin app to MAUI. But there are multiple problems, we face time after time. The most we can solve by some workarounds. But this time, I don´t know if there is a workaround.
The problem is, when tapping on our picker, on iOS it does not gain focus (Android works fine). So i can´t select one of the items.

My xaml-code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
			 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
			 xmlns:local="clr-namespace:Vogel.MAUI.App.Base"
			 x:Class="Vogel.MAUI.App.Base.Controls.Pickers.RoundedPicker"
			 x:Name="Root">

	<Grid HorizontalOptions="Fill"
		  HeightRequest="{ OnPlatform iOS=44, Android=50 }"
		  MinimumHeightRequest="{ OnPlatform iOS=44, Android=50 }"
		  ColumnSpacing="0">

		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="Auto" />
			<ColumnDefinition Width="40" />
		</Grid.ColumnDefinitions>

		<!-- The Frame element prevents the functionality of the GestureRecognizer binded on the grid. -->
		<!-- GestureRecognizer was transfered to the Frame element.  -->
		
		<!-- Border -->
		<Frame Grid.Column="0"
			   Grid.ColumnSpan="3"
			   Margin="0"
			   Padding="0"
			   CornerRadius="{ OnPlatform iOS=22, Android=25 }"
			   BorderColor="{ Binding BorderColor, Source={ x:Reference Root } }"
			   BackgroundColor="White"
			   HasShadow="False">
			<Frame.GestureRecognizers>
				<TapGestureRecognizer Tapped="OnRoundedPickerTapped" />
			</Frame.GestureRecognizers>
		</Frame>

		<!-- Placeholder -->
		<Label Grid.Column="0"
			   VerticalOptions="Center"
			   HorizontalOptions="Fill"
			   HorizontalTextAlignment="{ DynamicResource LayoutDirectionHorizontalTextAlignment }"
			   Padding="20,0,20,0"
			   TextColor="#CCCCCC"
			   LineHeight="{ OnPlatform iOS=1, Android=0.9 }"
			   FontSize="15"
			   FontFamily="{ StaticResource AppSemiboldFontFamily }"
			   BindingContext="{ x:Reference Name=picker }"
			   Text="{ Binding Placeholder, Source={x:Reference Root} }"
			   IsVisible="{ Binding PlaceholderVisible, Source={x:Reference Root} }" />

		<!-- SelectedItem -->
		<Label Grid.Column="0"
			   VerticalOptions="Center"
			   HorizontalOptions="Fill"
			   HorizontalTextAlignment="{ DynamicResource LayoutDirectionHorizontalTextAlignment }"
			   Padding="20,0,20,0"
			   TextColor="Black"
			   LineHeight="{ OnPlatform iOS=1, Android=0.9 }"
			   FontSize="15"
			   FontFamily="{ StaticResource AppSemiboldFontFamily }"
			   BindingContext="{ x:Reference Name=picker }"
			   Text="{ Binding Path=SelectedItem }" />

		<!-- ResetButton -->
		<Label Grid.Column="1"
			   VerticalOptions="Fill"
			   VerticalTextAlignment="Center"
			   HorizontalOptions="Fill"
			   HorizontalTextAlignment="Center"
			   TextColor="Black"
			   WidthRequest="38"
			   MinimumWidthRequest="38"
			   FontSize="22"
			   FontFamily="{ StaticResource GrialIconsFill }"
			   Text="{ x:Static local:GrialIconsFont.Close }"
			   IsVisible="{ Binding ResetButtonVisible, Source={x:Reference Root} }">
			<Label.GestureRecognizers>
				<TapGestureRecognizer Tapped="OnResetButtonClicked" />
			</Label.GestureRecognizers>
		</Label>

		<!-- ChevronDown (Default) -->
		<Label Grid.Column="2"
			   VerticalOptions="Center"
			   HorizontalOptions="Fill"
			   HorizontalTextAlignment="{ DynamicResource LayoutDirectionHorizontalTextAlignment}"
			   Padding="0,2,0,0"
			   TextColor="Black"
			   FontSize="26"
			   FontFamily="{ StaticResource GrialIconsFill }"
			   Text="{ Binding IconPicker, Source={ x:Reference Root } }" />

		<!-- Picker -->
		<Picker x:Name="picker"
				Grid.Column="0"
				Grid.ColumnSpan="3"
				FontSize="0"
				TextColor="Transparent"
				InputTransparent="True"
				BackgroundColor="Transparent"
				ItemsSource="{ Binding Items, Source={ x:Reference Root } }"
				ItemDisplayBinding="{ Binding DisplayText }"
				SelectedItem="{ Binding SelectedItem, Source={ x:Reference Root } }" />
	</Grid>
</ContentView>

My code behind:

using NLog;
using System.Collections.ObjectModel;

namespace Vogel.MAUI.App.Base.Controls.Pickers;

public partial class RoundedPicker : ContentView
{
	private static readonly ILogger _NLog = LogManager.GetCurrentClassLogger();

	public RoundedPicker()
	{
		Items = new ObservableCollection<RoundedPickerItem>();
		InitializeComponent();
	}

	public static readonly BindableProperty ItemsProperty =
	   BindableProperty.Create(
		   nameof(Items),
		   typeof(ObservableCollection<RoundedPickerItem>),
		   typeof(RoundedPicker));

	public ObservableCollection<RoundedPickerItem> Items
	{
		get { return (ObservableCollection<RoundedPickerItem>)GetValue(ItemsProperty); }
		set { SetValue(ItemsProperty, value); }
	}

	public static readonly BindableProperty IconPickerProperty =
	   BindableProperty.Create(
		   nameof(IconPicker),
		   typeof(string),
		   typeof(RoundedPicker),
		   defaultValue: "");

	public string IconPicker
	{
		get { return (string)GetValue(IconPickerProperty); }
		set { SetValue(IconPickerProperty, value); }
	}

	public static readonly BindableProperty ShowResetButtonProperty =
	   BindableProperty.Create(
		   nameof(ShowResetButton),
		   typeof(bool),
		   typeof(RoundedPicker),
		   defaultValue: true);

	public bool ShowResetButton
	{
		get { return (bool)GetValue(ShowResetButtonProperty); }
		set { SetValue(ShowResetButtonProperty, value); }
	}

	public static readonly BindableProperty SelectedItemProperty =
	  BindableProperty.Create(
		  nameof(SelectedItem),
		  typeof(RoundedPickerItem),
		  typeof(RoundedPicker),
		  defaultValue: null,
		  propertyChanged: OnIsSelectedChanged);

	public RoundedPickerItem SelectedItem
	{
		get { return (RoundedPickerItem)GetValue(SelectedItemProperty); }
		set { SetValue(SelectedItemProperty, value); }
	}

	public static readonly BindableProperty PlaceholderProperty =
	  BindableProperty.Create(
		  nameof(Placeholder),
		  typeof(string),
		  typeof(RoundedPicker),
		  defaultValue: "");

	public string Placeholder
	{
		get { return (string)GetValue(PlaceholderProperty); }
		set { SetValue(PlaceholderProperty, value); }
	}

	public bool PlaceholderVisible => SelectedItem == null;
	public bool ResetButtonVisible => ShowResetButton && SelectedItem != null;

	private static void OnIsSelectedChanged(BindableObject bindable, object oldValue, object newValue)
	{
		RoundedPicker picker = bindable as RoundedPicker;
		picker.OnPropertyChanged(nameof(PlaceholderVisible));
		picker.OnPropertyChanged(nameof(ResetButtonVisible));
	}

	public static readonly BindableProperty BorderColorProperty =
	   BindableProperty.Create(
		   nameof(BorderColor),
		   typeof(Color),
		   typeof(RoundedPicker),
		   defaultValue: Colors.Black);

	public Color BorderColor
	{
		get { return (Color)GetValue(BorderColorProperty); }
		set { SetValue(BorderColorProperty, value); }
	}

	private bool _RoundedPickerTappedLock = false; // prevent double tapping

	protected async void OnRoundedPickerTapped(object sender, EventArgs e)
	{
		if (_RoundedPickerTappedLock)
		{
			_NLog?.Debug("OnRoundedPickerTapped double-tapping prevented!");
			return;
		}
		_RoundedPickerTappedLock = true;
		try
		{
			// Workaround for android(API 28+) because already focused picker focus don't trigger picker selection popup
			if (DeviceInfo.Current.Platform == DevicePlatform.Android && picker.IsFocused)
				picker.Unfocus();

			// Workaround for ios because click on right end of picker does not trigger
			picker.Focus();

			// Lock it longer for extra double tapping prevention
			await Task.Delay(400);
		}
		catch (ObjectDisposedException)
		{
			_NLog?.Debug("OnRoundedPickerTapped: Picker object already disposed");
		}
		catch (Exception ex)
		{
			_NLog?.Error(ex, "OnRoundedPickerTapped: Unhandled exception");
		}
		finally
		{
			_RoundedPickerTappedLock = false;
		}
	}

	private void OnResetButtonClicked(object sender, EventArgs args)
	{
		SelectedItem = null;
	}

	public class RoundedPickerItem : ObservableObject
	{
		public RoundedPickerItem() : base(false) { }
		public RoundedPickerItem(string key, string text) : this()
		{
			_Key = key;
			_Text = text;
		}

		private string _Key = null;
		public virtual string Key
		{
			get => _Key;
			set
			{
				if (_Key != value)
				{
					_Key = value;
					NotifyPropertyChanged("Key");
				}
			}
		}

		private string _Text = null;
		public virtual string Text
		{
			get => _Text;
			set
			{
				if (_Text != value)
				{
					_Text = value;
					NotifyPropertyChanged("Text");
				}
			}
		}

		private string _DisplayText = null;
		public virtual string DisplayText
		{
			get => _DisplayText ?? Text;
			set
			{
				if (_DisplayText != value)
				{
					_DisplayText = value;
					NotifyPropertyChanged("DisplayText");
				}
			}
		}

		public override string ToString()
		{
			return Text;
		}
	}
}

In my opinion the only relevant part in the code behind is in the "OnRoundedPickerTapped". For Xamarin we added the "picker.Focus()" to set the focus on the picker (we left some comments to explain why we did some parts). But now on MAUI it seems that this does not work anymore.

As already said on Android it works completely fine, only iOS leads to problems.

Maybe some of you guys can help me/us to solve this problem.

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 32,386 Microsoft Vendor

Would you mind sharing the viewmodel and binding context? I try to modify the picker as the following, the picker item can be selected.

<Picker x:Name="picker"
         Grid.Column="0"
         Grid.ColumnSpan="3"     
Title="Select a monkey">
<Picker.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>Baboon</x:String>
<x:String>Capuchin Monkey</x:String>
<x:String>Blue Monkey</x:String>
<x:String>Squirrel Monkey</x:String>
<x:String>Golden Lion Tamarin</x:String>
<x:String>Howler Monkey</x:String>
<x:String>Japanese Macaque</x:String>
</x:Array>
</Picker.ItemsSource>
</Picker>

Maximilian Grabner 5

This is, where we call the picker:

<basepickers:RoundedPicker x:Name="roundedPicker"
						   IsEnabled="True"
						   Items="{ Binding RoundedPickerItems, Source={x:Reference Root} }"
						   Placeholder="Placeholder text"
						   BorderColor="{ DynamicResource EntryAndEditorsBorderColor }"
						   IconPicker="{ x:Static base:GrialIconsFont.ChevronDown }"
						   ShowResetButton="True"
						   HorizontalOptions="Fill"
						   Margin="0,10,0,10"/>

The items property is our itemsSource which looks like this:

public ObservableCollection<RoundedPickerItem> RoundedPickerItems { get; set; } =
[
	new RoundedPickerItem() { Key = "Key1", Text = "Text1", DisplayText="DisplayText1" },
	new RoundedPickerItem() { Key = "Key2", Text = "Text2", DisplayText="DisplayText2" },
	new RoundedPickerItem() { Key = "Key3", Text = "Text3", DisplayText="DisplayText3" },
];

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 32,386 Reputation points Microsoft Vendor

2024-08-13T08:59:00.4+00:00

Items="{ Binding RoundedPickerItems, Source={x:Reference Root} }

What's this Root? I remove this reference, and I cannot reproduce the issue.

on iOS it does not gain focus (Android works fine). So i can´t select one of the items.

Are the picker items empty? Can you tap on the picker and can you see a popup page?
Maximilian Grabner 5 Reputation points

2024-08-14T07:32:25.82+00:00

In the xaml-code we define x:Name="Root". So we use "Source={x:Reference Root}" to bind the value to a property in the code behind.

No the picker items are not empty. On Android i get the expected android popup with the items.
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 32,386 Reputation points Microsoft Vendor

2024-08-15T05:59:50.5+00:00

Could you take screenshots or video to show the problem? In addition, is this control <basepickers:RoundedPicker on a Page or on another ContentView? Which control is defined to x:Name="Root"on this Page or ContentView?

Maximilian Grabner 5

Regarding the topic about the x:Name="Root", as you can see in the original question in my code snippets, this is defined for the ContentView.

About the <basepickers:RoundedPicker> .
In the following screenshot you can see the xaml-file of the roundedPicker.

<?xml version="1.0" encoding="utf-8" ?>

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
			 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
			 xmlns:local="clr-namespace:Vogel.MAUI.App.Base"
			 x:Class="Vogel.MAUI.App.Base.Controls.Pickers.RoundedPicker"
			 x:Name="Root">
	<Grid HorizontalOptions="Fill"
		  HeightRequest="{ OnPlatform iOS=44, Android=50 }"
		  MinimumHeightRequest="{ OnPlatform iOS=44, Android=50 }"
		  ColumnSpacing="0">
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="Auto" />
			<ColumnDefinition Width="40" />
		</Grid.ColumnDefinitions>
		<!-- The Frame element prevents the functionality of the GestureRecognizer binded on the grid. -->
		<!-- GestureRecognizer was transfered to the Frame element.  -->
		
		<!-- Border -->
		<Frame Grid.Column="0"
			   Grid.ColumnSpan="3"
			   Margin="0"
			   Padding="0"
			   CornerRadius="{ OnPlatform iOS=22, Android=25 }"
			   BorderColor="{ Binding BorderColor, Source={ x:Reference Root } }"
			   BackgroundColor="White"
			   HasShadow="False">
			<Frame.GestureRecognizers>
				<TapGestureRecognizer Tapped="OnRoundedPickerTapped" />
			</Frame.GestureRecognizers>
		</Frame>
		<!-- Placeholder -->
		<Label Grid.Column="0"
			   VerticalOptions="Center"
			   HorizontalOptions="Fill"
			   HorizontalTextAlignment="{ DynamicResource LayoutDirectionHorizontalTextAlignment }"
			   Padding="20,0,20,0"
			   TextColor="#CCCCCC"
			   LineHeight="{ OnPlatform iOS=1, Android=0.9 }"
			   FontSize="15"
			   FontFamily="{ StaticResource AppSemiboldFontFamily }"
			   BindingContext="{ x:Reference Name=picker }"
			   Text="{ Binding Placeholder, Source={x:Reference Root} }"
			   IsVisible="{ Binding PlaceholderVisible, Source={x:Reference Root} }" />
		<!-- SelectedItem -->
		<Label Grid.Column="0"
			   VerticalOptions="Center"
			   HorizontalOptions="Fill"
			   HorizontalTextAlignment="{ DynamicResource LayoutDirectionHorizontalTextAlignment }"
			   Padding="20,0,20,0"
			   TextColor="Black"
			   LineHeight="{ OnPlatform iOS=1, Android=0.9 }"
			   FontSize="15"
			   FontFamily="{ StaticResource AppSemiboldFontFamily }"
			   BindingContext="{ x:Reference Name=picker }"
			   Text="{ Binding Path=SelectedItem }" />
		<!-- ResetButton -->
		<Label Grid.Column="1"
			   VerticalOptions="Fill"
			   VerticalTextAlignment="Center"
			   HorizontalOptions="Fill"
			   HorizontalTextAlignment="Center"
			   TextColor="Black"
			   WidthRequest="38"
			   MinimumWidthRequest="38"
			   FontSize="22"
			   FontFamily="{ StaticResource GrialIconsFill }"
			   Text="{ x:Static local:GrialIconsFont.Close }"
			   IsVisible="{ Binding ResetButtonVisible, Source={x:Reference Root} }">
			<Label.GestureRecognizers>
				<TapGestureRecognizer Tapped="OnResetButtonClicked" />
			</Label.GestureRecognizers>
		</Label>
		<!-- ChevronDown (Default) -->
		<Label Grid.Column="2"
			   VerticalOptions="Center"
			   HorizontalOptions="Fill"
			   HorizontalTextAlignment="{ DynamicResource LayoutDirectionHorizontalTextAlignment}"
			   Padding="0,2,0,0"
			   TextColor="Black"
			   FontSize="26"
			   FontFamily="{ StaticResource GrialIconsFill }"
			   Text="{ Binding IconPicker, Source={ x:Reference Root } }" />
		<!-- Picker -->
		<Picker x:Name="picker"
				Grid.Column="0"
				Grid.ColumnSpan="3"
				FontSize="0"
				TextColor="Transparent"
				InputTransparent="True"
				BackgroundColor="Transparent"
				ItemsSource="{ Binding Items, Source={ x:Reference Root } }"
				ItemDisplayBinding="{ Binding DisplayText }"
				SelectedItem="{ Binding SelectedItem, Source={ x:Reference Root } }" />
	</Grid>
</ContentView>

What do you want to see on the screenshots/video? The problem is, that on iOS it does not open the picker selection. On Android it works.

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 32,386 Reputation points Microsoft Vendor

2024-08-19T03:32:23.9966667+00:00

I want to know if you put this control (basepickers:RoundedPicker ) on a page, would you mind sharing how you add this control?

<basepickers:RoundedPicker x:Name="roundedPicker" IsEnabled="True" Items="{ Binding RoundedPickerItems, Source={x:Reference Root}

And what's this Root?

What do you want to see on the screenshots/video? The problem is, that on iOS it does not open the picker selection.

I'm not sure if the picker can popup and it's not clear how it cannot be selected.
Maximilian Grabner 5 Reputation points

2024-08-20T06:39:47.2133333+00:00

Originally i had the picker on the bottom of my test page:

Now i moved to it to the top:

On no position i can open the picker. What do you mean by "if the picker can popup"? Do i have to define a specific place for the picker?
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 32,386 Reputation points Microsoft Vendor

2024-08-21T07:21:26.8766667+00:00

What do you mean by "if the picker can popup"?

Could you see the picker popup like the following? I'm confused about the current behavior and your expected behavior. If it's possible, would you mind sharing a minimal reproduceable sample with me?
Maximilian Grabner 5 Reputation points

2024-08-28T13:39:15.61+00:00

I create a new project which i can share with you. But to answer at least your question. No, the picker popup is not visible
Maximilian Grabner 5 Reputation points

2024-08-28T14:24:55.3933333+00:00

I think I found the problem. On iOS the property ´inputTransparent="True"´ does not work, when there is a backgroundColor or textColor set to transparent.
Worked in XF but not in MAUI.. but nevertheless i have a little project, where the "picker" or better said the command listening on the frame behind the picker gets triggered. Even though calling "picker.focus();" it never gains focus.

Download demo: https://we.tl/t-QwbwQR0A09 (this link expires on 2024-08-31)

I also found this in the internet while looking for solution for the inputTransparent-property https://github.com/dotnet/maui/pull/14846. Do you know the state of this? Is this already in a released version included? I am currently using Microsoft.Maui.Controls version 8.0.82

1 answer

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 32,386 Reputation points Microsoft Vendor

2024-08-29T08:21:41.6533333+00:00

Hello,

I think I found the problem. On iOS the property ´inputTransparent="True"´ does not work, when there is a backgroundColor or textColor set to transparent.

Yes, I reproduce the issue. Please report this issue at GitHub- https://github.com/dotnet/maui/issues/new/choose, and wait for their updating, thanks for your collaboration.

Best Regards,

Wenyan Zhang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.
Maximilian Grabner 5 Reputation points

2024-08-29T08:24:03.1466667+00:00

So you can´t tell me, if this is already in an released version or still in a preview version?
https://github.com/dotnet/maui/pull/14846

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 32,386 Reputation points Microsoft Vendor

2024-08-29T08:49:10.4633333+00:00

It's another issue and has been fixed, you could try to rise a new issue. In addition, if it's possible, could you set inputTransparent false?

Maximilian Grabner 5 Reputation points

2024-08-29T09:09:35.5+00:00

Not really. Our picker looks like this:

When i set the property to false, the "X" is not clickable and i can´t clear the picker

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 32,386 Reputation points Microsoft Vendor

2024-08-30T08:51:45.8433333+00:00

For this, please rise an issue at GitHub- https://github.com/dotnet/maui/issues/new/choose, and wait for their updating. For the development of the product ecosystem, I cannot raise issues for you. If it's possible, you can attach the issue link here so that I can report it.

Maximilian Grabner 5 Reputation points

2024-08-30T10:07:43.3033333+00:00

https://github.com/dotnet/maui/issues/24503

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 32,386 Reputation points Microsoft Vendor

2024-09-02T10:00:58.28+00:00

Thanks for your collaboration, please focus on the issue and waiting for updates.
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

Picker does not gain focus on iOS

1 answer

Your answer