How to prevent TextField from focusing on page load on NativeScript?

Question

I've tried a couple different ways to get my text field to stop focusing on page load. The keyboard does not show when the page loads up but the field's label moves up as if it was in focus. I tried the suggestion at the top of this link but the field remained in focus. onPageLoad I also retrieved the TextField by Id and then called setFocusable(false) but this completely stops me from ever focusing on the element ever again. And android's clearFocus also doesn't do anything since the element still tries to focus. How can I get the field to stop focusing on Android? It is focusing on the Email Address field on page load.

    <Page 
    backgroundSpanUnderStatusBar="false" 
    backgroundColor="#222222" 
    loaded="onPageLoaded" 
    class="page" 
    actionBarHidden="true" 
    xmlns:Gradient="nativescript-gradient"
    xmlns:TIL="nativescript-textinputlayout">
    <GridLayout rows="*, auto, auto" columns="*">
        <GridLayout row="0" col="0" rows="auto, auto" columns="*" verticalAlignment="bottom" style="margin-bottom: 64dp;">
            <StackLayout row="0" col="0" style="margin-bottom: 16dp;">
                <Label class="h1 registration-app-title" horizontalAlignment="center" verticalAlignment="bottom" textWrap="true" text="Repeat"/>
            </StackLayout>
            <StackLayout row="1" col="0">
                <Label class="h3 registration-app-description" horizontalAlignment="center" verticalAlignment="bottom" textWrap="true" text="Save articles to your playlist and listen to them anywhere."/>
            </StackLayout>
        </GridLayout>
        <GridLayout row="1" col="0" rows="*, *, *, *" columns="*, *" class="registration-bottom">
            <StackLayout orientation="vertical" class="form" row="0" col="0" colSpan="2">
                        <TIL:TextInputLayout
                            class="text-input-layout"
                            hint="E-mail Address"
                            hintTextAppearance="StyledTIL"
                            >
                            <TextField 
                                id="text-field-email"
                                text="{{ email }}"
                                autocorrect="false" 
                                autocapitalizationType="none" 
                                keyboardType="email"
                                returnKeyType="next"/>
                        </TIL:TextInputLayout>

                        <TIL:TextInputLayout
                            class="text-input-layout"
                            hint="Password"
                            hintTextAppearance="StyledTIL"
                            marginBottom="30dp">
                            <TextField 
                                id="text-field-password"
                                text="{{ password }}"
                                secure="true"
                                autocapitalizationType="none"
                                returnKeyType="done"/>
                        </TIL:TextInputLayout>
            </StackLayout>
            <StackLayout orientation="horizontal" class="form" row="1" col="0" colSpan="2" style="width: 80%;">
                <Gradient:Gradient direction="to right" colors="#FF51A0FF, #FF3F2AFF" class="gradient" style="margin-right: 14;">
                    <Button class="btn btn-primary"
                            id="register-email"
                            text="Sign Up"
                            tap="register" />
                </Gradient:Gradient>
                <Gradient:Gradient direction="to right" colors="#FF51A0FF, #FF3F2AFF" class="gradient">
                    <Button class="btn btn-primary"
                            id="email"
                            text="Log In"
                            tap="authenticate"/>
                </Gradient:Gradient>
            </StackLayout>
            <StackLayout orientation="vertical" class="form" row="2" col="0" colSpan="2">
                        <Button class="btn btn-alternate"
                                id="facebook"
                                text="Connect with Facebook"
                                tap="authenticate"
                                textTransform="none"/>

                        <Button class="btn btn-alternate"
                                id="google"
                                text="Connect with Google"
                                tap="authenticate"
                                textTransform="none" />
            </StackLayout>
            <GridLayout row="3" col="0" colSpan="2" rows="*" columns="*">
                <Label class="h3 skip-step-label" 
                       id="anonymous"
                       row="0" 
                       col="0" 
                       text="Skip this step" 
                       tap="authenticate"/>
            </GridLayout>
        </GridLayout>
    </GridLayout>
</Page>

Answer 1

Try calling dismissSoftInput from utils module in your page's navigatedTo event.

import { ad } as utils from "utils/utils";
ad.dismissSoftInput();

Update: Above will just hide keyboard and will not remove focus completely. You always need another view which you can focus in order to remove focus from the TextField. Here is an example how you can do that,

https://play.nativescript.org/?template=play-tsc&id=sgXKCB