Xamarin Forms IOS “Entry” is uneditable

Question

I am using Xamarin.Forms to build my app. In the Login Page, I have the following layout

<ScrollView>
    <Grid 
        RowSpacing="{StaticResource MediumSpacing}" 
        ColumnSpacing="{StaticResource MediumSpacing}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--Two stackLayouts-->

        <!--StackLayout 1-->
        <StackLayout Spacing="0" Padding="0">
            <!--Three stacklouts here-->
            <!--First-->
            <StackLayout>
                <StackLayout.Spacing>
                    <OnPlatform x:TypeArguments="x:Double" Android="12" iOS="30" WinPhone="12"/>
                </StackLayout.Spacing>
                <StackLayout.Padding>
                    <OnPlatform x:TypeArguments="Thickness" Android="32,24,32,24" iOS="16,24,16,24" WinPhone="32,24"/>
                </StackLayout.Padding>
                <imagecircle:CircleImage
                    HorizontalOptions="Center"
                    VerticalOptions="Center"
                    WidthRequest="95" HeightRequest="95"
                    BorderColor="{StaticResource Primary}"
                    Aspect="AspectFill"
                    x:Name="CircleImageAvatar"/>

                <Label HorizontalTextAlignment="Center"
                   HorizontalOptions="FillAndExpand"
                   StyleId="LoginPageIdentifier"
                   LineBreakMode="WordWrap"
                   FontSize="Large"
                   TextColor="{DynamicResource DetailTextColor}"
                   Text="Single Sign On">

                    <Label.FontSize>
                        <OnPlatform x:TypeArguments="x:Double" Android="15" iOS="15" WinPhone="15"/>
                    </Label.FontSize>
                </Label>
            </StackLayout>
            <!--Second Stack Layout-->
            <StackLayout>
                <StackLayout.Padding>
                    <OnPlatform x:TypeArguments="Thickness" Android="32,0" iOS="32,0" WinPhone="32,0"/>
                </StackLayout.Padding>
                <StackLayout.Spacing>
                    <OnPlatform x:TypeArguments="x:Double" Android="0" iOS="15" WinPhone="10"/>
                </StackLayout.Spacing>
                <toolkit:EntryLine
                   Text="{Binding Email}" 
                   Keyboard="Email"
                   HorizontalOptions="FillAndExpand"
                   Placeholder="Email Address"
                   x:Name="EntryEmail"
                   StyleId="EmailTextField"

                   BorderColor="#ECECEC">
                    <toolkit:EntryLine.HorizontalTextAlignment>
                        <OnPlatform x:TypeArguments="TextAlignment" iOS="Center"/>
                    </toolkit:EntryLine.HorizontalTextAlignment>
                </toolkit:EntryLine>

                <toolkit:EntryLine 
                   Text="{Binding NamespaceUri}" 
                   HorizontalOptions="FillAndExpand"
                   HorizontalTextAlignment="Center"
                   Placeholder="Namespace"
                   StyleId="EmailTextField"
                   Keyboard="Text"
                   BorderColor="#ECECEC">
                    <toolkit:EntryLine.HorizontalTextAlignment>
                        <OnPlatform x:TypeArguments="TextAlignment" iOS="Center"/>
                    </toolkit:EntryLine.HorizontalTextAlignment>
                </toolkit:EntryLine>
            </StackLayout>
            <!--Third Stack Layout-->
            <StackLayout>
                <StackLayout.Padding>
                    <OnPlatform x:TypeArguments="Thickness" Android="32,16,32,0" iOS="32,25,32,0" WinPhone="32,16,32,0"/>
                </StackLayout.Padding>
                <StackLayout.Spacing>
                    <OnPlatform x:TypeArguments="x:Double" Android="0" iOS="16" WinPhone="10"/>
                </StackLayout.Spacing>
                <Button 
                Text="Sign In"
                Command="{Binding LoginCommandSso}"
                HorizontalOptions="FillAndExpand"
                StyleId="SignInButton"
                TextColor="White"
                BackgroundColor="{StaticResource Primary}">

                    <Button.FontAttributes>
                        <OnPlatform x:TypeArguments="FontAttributes" iOS="Bold"/>
                    </Button.FontAttributes>
                </Button>

            </StackLayout>
        </StackLayout>

        <!--StackLayout 2-->
        <!--Contains activity indicator and Corresponding label-->
        <AbsoluteLayout>
            <StackLayout 
        Grid.Row="1" 
        Padding="16,0" 
        VerticalOptions="Center" 
        Orientation="Horizontal"
        HorizontalOptions="Center"
        AbsoluteLayout.LayoutFlags="PositionProportional"
        AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1"
        IsVisible="{Binding IsBusy}">
                <ActivityIndicator IsRunning="{Binding IsBusy}">
                    <ActivityIndicator.Color>
                        <OnPlatform x:TypeArguments="Color" Android="{StaticResource Primary}"/>
                    </ActivityIndicator.Color>
                </ActivityIndicator>
                <Label Text="{Binding Message}" VerticalOptions="Center"  HorizontalOptions="Center" />
            </StackLayout>
        </AbsoluteLayout>
        <!--Stack Layout 3-->

    </Grid>
</ScrollView>

When run on Android Emulator I can input text in "EntryLine" and everything seems to work fine. However, when I am trying to run it on IOS simulator, the text becomes ineditable i.e. readonly. Basically on IOS simulator everything inside StackLayout is becoming "ReadOnly" I also tried using forms "Entry" instead of FormsToolKit.EntryLine, but no result. I am facing an issue in above code itself, adding just a "Entry" in xaml and testing on IOS simulator works fine. Have already asked the same question on Xamarin Forums, but haven't found any answer.

EDIT 1 - Added the complete stack layout.

Using -

Visual Studio 2017, Windows 10, Xamarin - 2.3.4.247 FormsToolKit - 1.1.18 IOS - MacBook Air 10.3

is it possible there is somewhere a grid overlaying the entry? on android grids are input transparent - on iOS not. Try giving the entry a tap listener in some way and check if that tap is being raised (or add a button in its place and see if it can be tapped) — woelliJ
as @woelliJ mentioned; something could be overlapping. Please post the full layout to see what could be wrong. — Gerald Versluis
@woelliJ - Yes, the stackLayout is inside a grid. <Grid RowSpacing="{StaticResource MediumSpacing}" ColumnSpacing="{StaticResource MediumSpacing}"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> I tried adding a button in its place, the button also gets disabled. — Md Naushad
by disabled you mean that it is in a disabled state, or that it does not receive input? it's ok, that the stacklayout is in a grid - but there could be a some layout (e.g. a grid) overlapping (being in front if it - but not visible) of the controls — woelliJ

woelliJ woelliJ · Accepted Answer · 2017-06-14T08:04:00

Your <AbsoluteLayout> overlaps your content and catches all input events. You'll have to try setting its IsVisible Property to false (or the InputTransparent property to try). At least as long as the Activity Indicator is not running.

(If that is not working you might try to handle it with an effect (or a custom renderer) that sets input transparancy on iOS specifically)

(You might also consider not placing it inside the scroll view, since it would get scrolled away eventually)

Xamarin Forms IOS “Entry” is uneditable

1 Answers