Forum Xamarin.iOS

Announcement:

The Xamarin Forums have officially moved to the new Microsoft Q&A experience. Microsoft Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

To create new threads and ask questions head over to Microsoft Q&A for .NET and get involved today.

Xcode12/iOS 14 breaking entry controls

NeilNNeilN Member ✭✭
edited September 2020 in Xamarin.iOS

We've updated to Xcode 12 and the latest version of Visual Studio for Mac (v8.7.8b4) that supports it. Running unchanged source code in the simulator results in this behaviour:

  • If a username is entered and then a password is entered, focus is locked on the password control and nothing else on the screen (like the login button or the username control) can be tapped.
  • If a password is entered and then a username is entered, focus is not locked and all controls react to taps normally. The password can even be re-entered without focus being locked.

Deploying the app to a physical phone results in no controls whatsoever reacting to taps. I've updated all nuget packages, cleaned, and rebuilt and the same behaviour persists. We have a spare Mac still on Xcode 11 and the same code (attached) works fine on there.

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai

    I can't reproduce all the code you provided as lacking some custom controls and styles.
    Simulate it using:

    <Grid>
        <ScrollView VerticalOptions="FillAndExpand" >
            <StackLayout Padding="20" Orientation="Vertical" >
                <Grid x:Name="Grid_Main">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="70"/>
                        <RowDefinition Height="70"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="4*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Entry
                    Grid.Row="0"
                    Grid.Column="0"
                    x:Name="UserNameEntry"
                    Placeholder="Username"
                    HorizontalOptions="End"/>
                    <Entry
                    Grid.Row="1"
                    Grid.Column="0"
                    x:Name="PasswordEntry"
                    Placeholder="Password"
                    IsPassword="True"
                    HorizontalOptions="End">
                    </Entry>
                </Grid>
    
                <StackLayout
                Margin="0,10,0,10"
                Orientation="Horizontal"
                HorizontalOptions="Center"
                BackgroundColor="Transparent">
                    <Label 
                    Text="Remember Me"
                    TextColor="White"/>
    
                </StackLayout>
    
                <Button Margin="60,40,60,0" TextColor="White" BackgroundColor="Blue" Text="Login" CornerRadius="22" Clicked="Button_Clicked">
                </Button>
                <Label x:Name="welcomeLbl"  TextColor="White" VerticalOptions="StartAndExpand" FontSize="14" HorizontalTextAlignment="Center" FontAttributes="Bold">
                </Label>
    
                <Label x:Name="versionLbl"  TextColor="White" VerticalOptions="StartAndExpand" FontSize="14" HorizontalTextAlignment="Center" FontAttributes="Bold">
                </Label>
            </StackLayout>
        </ScrollView>
    </Grid>
    

    The login button could be clicked successfully:

    Make sure the login button is located in the touchable area.

  • NeilNNeilN Member ✭✭

    Thanks for your comment LandLu. We investigated further based on your code (which initially exhibited the same issues in the app). In App.xaml we have:

        <Application.Resources>
        <ResourceDictionary>
        ...
            <Style TargetType="Entry">
                <Setter Property="Visual" Value="Custom"/>
            </Style>
        ...
    

    In CustomMaterialEntryRenderer.cs we have:

    [assembly: ExportRenderer(typeof(Entry), typeof(CustomMaterialEntryRenderer), new[] { typeof(CustomVisual) })]
    namespace Zeus.iOS.CustomRenderer
    {
    public class CustomMaterialEntryRenderer : MaterialEntryRenderer
    {
    public CustomMaterialEntryRenderer()
    {
    }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
    
            Element.FontSize = 15.0f;
        }
    }
    

    }

    If we comment out "Element.FontSize = 15.0f;" everything works. Any idea what's happening?

  • LandLuLandLu Member, Xamarin Team Xamurai

    It could be caused by the material package. It overlaps the area of the button.
    However, we could set the font size directly in the Forms like:

    <Style TargetType="Entry">
        <Setter Property="Visual" Value="Custom"/>
        <Setter Property="FontSize" Value="15"/>
    </Style>
    

    I've tested this and it worked as expected.

  • NeilNNeilN Member ✭✭

    Didn't work for us. I don't think it's Material overlapping as per point 2 of my original post:

    • If a password is entered and then a username is entered, focus is not locked and all controls react to taps normally. The password can even be re-entered without focus being locked.

    We've also discovered if we remove IsPassword="True" then everything works again. Obviously not a feasible workaround but we have come up with a workable option - setting all the properties explicitly in the control definition for password:

                        <Entry
                            Grid.Row="0"
                            Grid.Column="0"
                            x:Name="UserNameEntry"
                            Style="{StaticResource EntryStyle}"
                            Text="{Binding Path=User.UserName}"
                            Placeholder="Username"
                            HorizontalOptions="End"/>
                        <Entry
                            Grid.Row="1"
                            Grid.Column="0"
                            x:Name="PasswordEntry"
                            Placeholder="Password"
                            Text="{Binding Path=User.Password}"
                            IsPassword="True"
                            WidthRequest="240"
                            Margin="20,4"
                            PlaceholderColor="LightGray"
                            TextColor="White"
                            ReturnType="Next"
                            FontSize="15"
                            HorizontalOptions="CenterAndExpand">
                        </Entry>
    

    Somewhat disconcerting that something (relatively) simple that worked in Xcode 11 broke in Xcode 12, though.

  • I'm experiencing the same issue and was able to reproduce it in the attached project.

    It seems that this problem occurs using styles in a password entry with the material package.

  • LandLuLandLu Member, Xamarin Team Xamurai

    As @MateusHenrique said, this only occurred when you consumed material packages.
    Try to remove the renderer and set the font size in Forms.
    Or you could raise issues on the github:
    https://github.com/xamarin/Xamarin.Forms/issues

Sign In or Register to comment.