Unable to hide keyboard


#1

Hi all,

I am trying to hide keyboard by clicking on parent StackLayout. I have tried literally all examples I could find online and nothing worked. Most examples seems to be written for core JS and not for Angular. I am using Angular with Typescript. I probably missed something. I am working on Android emulator, but I would need a solution to work on both android and iOS. Here is my code:

@ViewChild("testTextField") testTextField: ElementRef;
clearTextFieldFocus(args){  
 var myTextfield = <TextField>this.testTextField.nativeElement;

 myTextfield.dismissSoftInput();
 myTextfield.android.clearFocus();
}
<StackLayout height="200"  backgroundColor="lime" (tap)="clearTextFieldFocus(args)">

      <TextField #testTextField ></TextField>
    </StackLayout> 

Any help is highly appreciated. Thank you.


#2

Just works as expected, can you try reproducing the issue in playground?


#3

@manojdcoder thank you for prompt reply. I have tried in Nativescript Playground and it is working fine. The problem was that I haven’t added [(ngModel)]. Here is link to my playground, I have added nativescript-dom plugin, so it is easy to hide keyboard no matter which TextField it was open from. https://play.nativescript.org/?template=play-ng&id=dcTScU


#4

@bachras I think the solution you follow may not be feasible, running a loop against a class name. Here is an easy native solution, without any loop without worrying which textfield is focused.

import * as utils from "utils/utils";
import { isIOS, isAndroid } from "platform";
import * as frame from "ui/frame";

function dismissSoftKeybaord(){
 if (isIOS) {
    frame.topmost().nativeView.endEditing(true);
 }
 if (isAndroid) {
   utils.ad.dismissSoftInput();
 }
}

Hide keyboard without referencing to textField
#5

Your solution is even better. Thank you very much. Have a nice weekend!


#6

@manojdcoder I have just tried your code on my app and it works fine on main page, but it doesn’t hide keyboard if I am on modal dialog. Do you have any idea how to solve this issue? Thanks


#7

Is it on iOS / Android?


#8

Unfortunately, it doesn’t work on both iOS and Android. Any ideas?


#9

@bachras At least I never had to use this with modal dialogs. Try the below one, it should also work with modal dialogs.

import * as application from "application";
import { isIOS, isAndroid } from "platform";
import * as utils from "utils/utils";

declare var UIApplication, android;

export function dismissSoftKeybaord() {
    if (isIOS) {
        utils.ios.getter(UIApplication, UIApplication.sharedApplication)
            .keyWindow
            .endEditing(true);
    }
    if (isAndroid) {
        const dialogFragment = application.android
            .foregroundActivity
            .getFragmentManager()
            .findFragmentByTag("dialog");
        if (dialogFragment) {
            utils.ad.dismissSoftInput(dialogFragment.getDialog().getCurrentFocus());
        } else {
            utils.ad.dismissSoftInput();
        }
    }
}

Note: The way how modal dialog (DialogFragment) is created, seems changed in the upcoming version of NativeScript, this code may need fixing then.


#10

Thank you very much.


#11

This worked for me, thanks! Been trying to figure this one out for ages!

I’ve created my own dropdown select element and needed the keyboard to close when the user focus’s on the dropdown after clicking a TextField.


#13

Nice!
this would make your code perfect :wink:

else if (isAndroid)