Nativescript: [Feature] Helper to dismiss keyboard

[vcooley]

Currently, as far as I can tell, you have to have a reference to a TextField or similar in order to call the dismissSoftInput method. This feels hacky when, for instance, you want to dismiss the keyboard when a certain action is taken by a user in order to show more of the screen.

This is the only way that I know of to dismiss the keyboard, whether or not the field is focused:

const field = <TextField>this.page.getViewById('first-name');
field.dismissSoftInput();

I don't think that this code clearly expresses the intent of the developer, and could be more concise with something such as:

this.page.dismissSoftInput();

If something similar to this approach is already possible, please let me know.

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[bradmartin]

I'd kill for something on iOS like this. On android it's a simple call to close it and I use it in every app I do. Outlined it here: https://bradmartin.net/2016/10/21/dismiss-the-android-softkeyboard-programmatically-in-a-nativescript-app/ I mainly use this on a button tap when a form is completed. Sometimes the done returnType doesn't close the keyboard so I just go with this approach. Now that I've gotten more into iOS I've been experiencing how much a nightmare it is to get the iOS keyboard to close consistently. The returnKeyType next works most of the time but I think on TextView's it doesn't close the keyboard and adds a line break (seems reasonable I suppose). So if there is a simple global iOS way to close the keyboard that would be awesome. If so, it seems like a great method for utils or the page.

[vcooley]

To expand on this, I have actually found that it is an extra line of code on iOS. The field must be focused before dismissing the keyboard. So let's say there are multiple fields on a screen and you want to dismiss the keyboard no matter which is focused. The above code will work if the field with id="first-name" is focused, but assuming a different field is focused (for instance a field with id="last-name"), you need the following code:

const field = <TextField>this.page.getViewById('first-name');
field.focus();
field.dismissSoftInput();

[bhavincb]

if nativescript can provide extra event binding support like 'focus' and 'blur' than it will be great to have it.

[manojdcoder]

It must be already possible with Android.

import * as utils from "tns-core-modules/utils/utils";
utils.ad.dismissSoftInput();

Just needs equivalent on iOS.

[bradmartin]

@manojdcoder

 UIApplication.sharedApplication.sendActionToFromForEvent(
      "resignFirstResponder",
      null,
      null,
      null
    );

This works on iOS without reference to a textfield.

[manojdcoder]

Thanks, though I had been using

utils.ios
            .getter(UIApplication, UIApplication.sharedApplication)
            .keyWindow
            .endEditing(true);

Do you think resignFirstResponder could be better?

[bradmartin]

Not entirely sure, after the few years in the mobile space I've still never had time to learn a lot of iOS 😄

[bradmartin]

@tsonevn - do you know if the above approach would work on iOS? Without any negative impact?

I've just added this to the Swiss-Army-Knife plugin and it has worked on the few tests I've ran.

[bearoutthere]

After looking at several threads on this topic, here's what i came up with, which is shorter than all other examples i've seen.

import * as nsutils from 'tns-core-modules/utils/utils';
import { ios } from 'tns-core-modules/application';

export const hideKeyboard = () => {
    if (ios) {
        ios.nativeApp.sendActionToFromForEvent('resignFirstResponder, null, null, null');
    } else {
        nsutils.ad.dismissSoftInput();
    }
};

[darylteo]

@bearoutthere thank you so much for that code for ios!

Just want to note that there is a typo, which took me awhile to figure out. The single quote is in the wrong place. Don't copy and paste without reading, folks!

import * as nsutils from 'tns-core-modules/utils/utils';
import { ios } from 'tns-core-modules/application';

export const hideKeyboard = () => {
    if (ios) {
        ios.nativeApp.sendActionToFromForEvent('resignFirstResponder', null, null, null);
    } else {
        nsutils.ad.dismissSoftInput();
    }
};