Keyboard pops down immediately after popping up, after single tap on input field

[samiul-gtmi]

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 6.0.2
• Cross-platform modules: 6.0.1
• Android Runtime: 6.0.2

Describe the bug
This project was recently upgraded from NS5 to NS6 by following the official documentation. The login page contains very simple password, email fields and a login button in it. Problem appears to be the keyboard pop up, on which the user will tap to write the email or password. if the email field is tapped single time, the keyboard pops up but also immediately pops down, so the user can't write anything. tapping single time on the password field results in the same outcome.

However, if double tapped on the email/password fields, the keyboard pops up and stays. Also, if you don't fill up either the email or password field and tap on the login button, the keyboard pops up and stays. I have inspected the login.ts, login.xml, and androidmanifest.xml file but, yet to find a reason to find out this behavior. The files are given below. Kindly help me to identify and understand the problem.

login.ts file -

"use strict";

import * as commonFunctions from "../../shared/commonFunctions";
import * as PanamaRestService from "../../shared/service/PanamaRestService";
import * as utilityModule from "tns-core-modules/utils/utils";


import * as config from '../../common/constants';
import * as dialogs from "tns-core-modules/ui/dialogs";
import {isAndroid, isIOS} from "tns-core-modules/platform";

import * as prefsStore from "../../shared/persistentPrefsStore";

import {pages,navigateTo} from "../../shared/navigations";
import * as textFieldModule from "tns-core-modules/ui/text-field";
import {Page} from 'tns-core-modules/ui/page';

/**
 * Provides Visibility etc ENUMs
 */
import * as nsEnums from "tns-core-modules/ui/enums";

// Google Sign-in functionality
var googleSignIn = require("custom-social-google-plus-signin");

var loginPage = function () {};

import {
    LoginModel
} from "./login-model";
import {RestConfigInfoInterface} from "../../shared/service/PanamaRestService";


var page;
var server;
var loginModel:LoginModel = new LoginModel();

// done with variable declaration
/**
 * executes when the page is loaded
 * @param args
 */
export function pageLoaded(args) {

    console.log(">> Inside login.pageLoaded");
    

    page = < Page > args.object;
    page.bindingContext = loginModel;


    if(config.isBetaVersion() || config.isDevVersion() || prefsStore.isDevMode()) {

        // if the app_version has BETA/DEVin it show the server selection area.
        loginModel.restServerUrlVisibility = nsEnums.Visibility.visible;
    }else {

        // otherwise hide it
        loginModel.restServerUrlVisibility = nsEnums.Visibility.collapse;
    }

    loginModel.on('propertyChange', function (propertyChangeData: any) {
        try {


            if (propertyChangeData.propertyName === "emailIdText") {

                // if change done then display the close icon on email field and disable the close icon on password field
                // if he manually clear the the text field then disable the close icon
                loginModel.emailTextCloseIcon = (loginModel.emailIdText == null) || (loginModel.emailIdText.length === 0) ?
                    nsEnums.Visibility.collapse : nsEnums.Visibility.visible;

            } else if (propertyChangeData.propertyName === "passwordText") {

                // if change done then display the close icon on password field and disable the close icon on email field
                // if he manually clear the the text field then disable the close icon
                loginModel.pwdTextCloseIcon = ((loginModel.passwordText == null) || (loginModel.passwordText.length === 0)) ?
                    nsEnums.Visibility.collapse : nsEnums.Visibility.visible;
            }
        } catch (error) {
            console.log("WARN: propertyChange handler error:", error);
        }
    });


    /**
     * onFocus event
     */
    page.getViewById("emailTextFieldId").on(textFieldModule.TextField.focusEvent, function () {

        console.log(">>> inside login.emailTextFieldId.focusEvent");
        // if change done then display the close icon on email field and disable the close icon on password field
        // if he manually clear the the text field then disable the close icon
        loginModel.emailTextCloseIcon = ((loginModel.emailIdText == null) || (loginModel.emailIdText.length === 0)) ?
            nsEnums.Visibility.collapse : nsEnums.Visibility.visible;
    }, this);

    /**
     * out of focus event
     */
    page.getViewById("emailTextFieldId").on(textFieldModule.TextField.blurEvent, function () {

        console.log(">>> inside login.emailTextFieldId.blurEvent");
        loginModel.emailTextCloseIcon = nsEnums.Visibility.collapse;

    }, this);

    /**
     * onFocus event
     */
    page.getViewById("passwordTextFieldId").on(textFieldModule.TextField.focusEvent, function () {

        console.log(">>> inside login.passwordTextFieldId.focusEvent");
        // if change done then display the close icon on password field and disable the close icon on email field
        // if he manually clear the the text field then disable the close icon
        loginModel.pwdTextCloseIcon = ((loginModel.passwordText == null) || (loginModel.passwordText.length === 0)) ?
            nsEnums.Visibility.collapse : nsEnums.Visibility.visible;
    }, this);

    /**
     * out of focus event
     */
    page.getViewById("passwordTextFieldId").on(textFieldModule.TextField.blurEvent, function () {

        console.log(">>> inside login.passwordTextFieldId.blurEvent");
        // loginModel.pwdTextCloseIcon = nsEnums.Visibility.collapse;
    }, this);

    //  function call for prepare custom user agent constant
    commonFunctions.prepareCustomUserAgent();

    console.log("isBetaVersion: ", config.isBetaVersion());
    console.log("isDevVersion: ", config.isDevVersion());

    // Choose the defaults based on the region
    const rememberedServerName = prefsStore.getRememberedEnvironmentName();
    if(rememberedServerName != null) {

        console.log("Using stored server Name:", rememberedServerName);
        server = config.REST_SERVERS[rememberedServerName];
    }else{

        if(config.isDevVersion() === true){

            server = config.REST_SERVERS.dev;
        }else if(config.isBetaVersion()){

            server = config.REST_SERVERS.staging;
        }else{
            server = config.REST_SERVERS.prod;
        }
        /**
        server = config.isJapanRegion() ?
            isBetaVersion() ? config.REST_SERVERS.staging : config.REST_SERVERS.prod :
            config.REST_SERVERS.dev;
         **/

        prefsStore.storeInitialEnvironmentName(server.name);
        console.log(">>>> No stored env name, init value is:", server.name);
    }

    console.log("Using Env: ", server);

    prefsStore.rememberEnvironmentName(server.name);

    // set and show the URL
    setAndShowRESTURL(server);

    // clear panama temp folder
    commonFunctions.clearPanamaTmpFolderContents();
};

/**
 * this function is used to get email from local storage
 * and show that in email field 
 */
function getStoredEmailAndShow() {

    let storedEmail = commonFunctions.getUserMailFromStore();
    console.log(">>> login.storedEmail:", storedEmail);

    if (!commonFunctions.isEmptyString(storedEmail)) {
 
        loginModel.emailIdText = storedEmail;
        loginModel.checkBoxVisibility = nsEnums.Visibility.visible;
        loginModel.rememberUserMail = true;
        setFocus2PasswordTextField();
    } else {

        loginModel.emailIdText = null;
        loginModel.checkBoxVisibility = nsEnums.Visibility.collapse;
        loginModel.rememberUserMail = false;
        setFocus2EmailTextField();
    }

}

// this will execute when tapping anywhere on the page
export function onMainView() {
        // hide the keyboard
        console.log('>>>inside mainView')
        dismissKeyboard();
}

the login.xml file -

<Page loaded="pageLoaded" navigatedTo="{{onNavigatedTo}}" actionBarHidden="true"
      xmlns="http://schemas.nativescript.org/tns.xsd">

    <GridLayout rows="*">
        <ScrollView row="0" tap="onMainView">
            <StackLayout verticalAlignment="middle" horizontalAlignment="center" class="page-main-content-class"
                         isUserInteractionEnabled="{{ isActivityIndicatorBusy === false}}">

                <StackLayout visibility="{{restServerUrlVisibility}}" class="panama-rest-url">

                    <Label text="{{ restServerUrl }}" top="50" height="auto" textWrap="true"/>

                    <GridLayout columns="*, *" rows="*">
                        <Label row="0" col="0"
                               text="{{ L('login.tap_here_to_select_env') }}"
                               horizontalAlignment="center"
                               tap="onRestUrlSelectionTap"
                               class="tap-here-to-select-text"
                               textWrap="true"/>

                        <Label row="0" col="1"
                               text="{{ L('login.tap_here_to_reset_env') }}"
                               horizontalAlignment="center"
                               tap="onRestUrlResetTap"
                               class="tap-here-to-select-text"
                               textWrap="true"/>
                    </GridLayout>

                </StackLayout>

                <StackLayout orientation="horizontal" horizontalAlignment="center" class="panama-logo-text-wrapper">
                    <Image src="res://panamalogo" class="panama-logo" tap="onLogo" />
                </StackLayout>

                <!-- enter credentials section -->
                <StackLayout visibility="visible" id="credentialsContainer">

                    <!-- input fields -->
                    <Label text="{{ validationErrorMessage }}" textWrap="true"
                           visibility="{{ showValidationError ? 'visible' : 'collapse' }}" class="error-login-text" />

                    <StackLayout orientation="horizontal" class="{{ 'input-field ' + errorBorder }}">

                        <Label text="{{ iconObj.emailIcon }}" class="icon input-icon"/>

                        <GridLayout rows="auto">
                            <TextField row="0"
                                   width="90%"
                                   horizontalAlignment="left"
                                   autocapitalizationType="none"
                                   hint="{{ L('login.email_address') }}"
                                   text="{{ emailIdText }}"
                                   class="login-text-field"
                                   tap="onEmailAddressTap"
                                   id="emailTextFieldId"
                                   autocorrect="false"
                                   keyboardType="email"
                                   returnKeyType="Next"
                                   returnPress="onReturn"/>
                            <Label horizontalAlignment="right"
                                   row="0"
                                   verticalAlignment="middle"
                                   text="{{ iconObj.cancelIcon }}"
                                   class="icon text-clear-icon"
                                   visibility="{{ emailTextCloseIcon }}"
                                   tap="onClearEmailTextField"/>
                        </GridLayout>
                    </StackLayout>
                    <StackLayout orientation="horizontal" class="{{ 'input-field password-field ' + errorBorder }}">

                        <Label text="{{ iconObj.passwordIcon }}" class="icon input-icon"/>

                        <GridLayout rows="auto">
                            <TextField horizontalAlignment="left"
                                       width="90%"
                                       row="0" secure="true"
                                       tap="onPasswordTap"
                                       autocapitalizationType="none" returnPress="onReturn"
                                       hint="{{  L('login.password') }}" text="{{ passwordText }}"
                                       class="login-text-field"
                                       returnKeyType="Done"                                       
                                       id="passwordTextFieldId"/>
                            <Label horizontalAlignment="right" row="0" verticalAlignment="middle"
                                   text="{{ iconObj.cancelIcon }}" class="icon text-clear-icon"
                                   visibility="{{ pwdTextCloseIcon }}" tap="onClearPasswordTextField"/>
                        </GridLayout>
                    </StackLayout>
                    <DockLayout>
                        <Label dock="bottom" text="{{ L('login.forgot_password') }}"
                               horizontalAlignment="center" verticalAlignment="middle" textWrap="true"/>
                        <StackLayout tap="onRememberMe" dock="left" verticalAlignment="middle"
                                     class="remember-me-wrapper"
                                     orientation="horizontal">
                            <StackLayout horizontalAlignment="center" class="checkbox-wrapper">
                                <StackLayout class="check-box" visibility="{{ checkBoxVisibility }}">
                                </StackLayout>
                            </StackLayout>
                            <Label text="{{ L('login.remember_email') }}" class="remember-me-text"/>
                        </StackLayout>
                    </DockLayout>
                    <Button horizontalAlignment="center" text="Login"
                            tap="onLogin" isUserInteractionEnabled="{{isActivityIndicatorBusy === false}}"
                            class="button login-button" />

                    <!-- social icons section -->
                    <StackLayout orientation="horizontal" class="social-wrapper" horizontalAlignment="center" visibility="collapse">

                        <!-- We dont support Facebook in the initiall version, hence commenting out -->
                        <!--
                            <Label text="{{ iconObj.facebookIcon }}" tap="onFacebookLogin" class="icon social-icon fb-icon" />
                            <StackLayout class="pipe-symbol">
                            </StackLayout>
                            -->
                        <!--
                        <Label text="{{ iconObj.googleplusIcon }}" tap="onGoogleLogin"
                               class="icon social-icon gplus-icon"/>
                         -->
                    </StackLayout>
                </StackLayout>
            </StackLayout>
        </ScrollView>
        <StackLayout class="loader-wrapper"
                     visibility="{{ isActivityIndicatorBusy ? 'visible' : 'collapse' }}" >
            <ActivityIndicator busy="{{ isActivityIndicatorBusy }}"/>
        </StackLayout>
    </GridLayout>
</Page>

app/App_Resources/Android/src/main/AndroidManifest.xml -

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
	package="__PACKAGE__"
	android:versionCode="7"
	android:versionName="3.0.0">

	<supports-screens
		android:smallScreens="true"
		android:normalScreens="true"
		android:largeScreens="true"
		android:xlargeScreens="true"/>

	<uses-sdk
		android:minSdkVersion="17"
		android:targetSdkVersion="__APILEVEL__"/>

	<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
	<uses-permission android:name="android.permission.INTERNET"/>
	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

	<application
		android:name="com.tns.NativeScriptApplication"
		android:allowBackup="true"
		android:icon="@drawable/icon"
		android:label="Panama"
		android:theme="@style/AppTheme"
		android:largeHeap="true"
		tools:replace="android:label">

		<activity
			android:name="com.tns.NativeScriptActivity"
			android:label="Panama"
			android:configChanges="keyboardHidden|orientation|screenSize"
			android:screenOrientation="portrait"
			android:launchMode="singleTop"
			android:theme="@style/LaunchScreenTheme">
			<meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" />

			<intent-filter>
				<action android:name="android.intent.action.MAIN" />
				<category android:name="android.intent.category.LAUNCHER" />
			</intent-filter>
		</activity>
		<activity android:name="com.tns.ErrorReportActivity"/>
	</application>
</manifest>

Please help me to identify and understand the problem.

[SergeyMell]

You have a keyboard dismiss in your main view.

<ScrollView row="0" tap="onMainView">
            <StackLayout verticalAlignment="middle" horizontalAlignment="center" class="page-main-content-class"
                         isUserInteractionEnabled="{{ isActivityIndicatorBusy === false}}">
                         ...

export function onMainView() {
        // hide the keyboard
        console.log('>>>inside mainView')
        dismissKeyboard();
}

In android, the event propagates in a way similar to the web one. So in your case when you tap on your input the keyboard shows up, then the event propagates up to the main view, and your function onMainView closes the keyboard.

On iOS, such an issue will not appear because iOS events propagate in the opposite way.

[bradmartin]

I'd handle the dismissKeyboard differently with your page tap event. You could wire that up on a button tap (submit or login) instead of tapping the page. Also be sure your form uses the return key type for your textfields so the user can move to the textfields via their keyboard control.