DismissSoftInput() for search-bar for Nativescript-Vue

Question

Explaining the problem:

The search-bar has no way of dismissing an open keyboard. This makes the search-bar a quite unusable as the normal user pattern is that the user search for something and then press the item and gets navigated there. On Android (at least on >= 5.x), the open keyboard will continue to stay open, even on the new page.

Referring to the question on Github, anyone how to do that for Nativescript-Vue and not for Nativescript with Typescript

Updated:

Added Playground: https://play.nativescript.org/?template=play-vue&id=hrrcW9

If I minimize the app, then click on it again, the keyboard pops open again.

Manoj Manoj · Accepted Answer · 2019-07-01T16:53:54

As you could already see in the linked issue, the feature request is closed as completed. dismissSoftInput() is a method on SearchBar now that hides the keyboard.

If you have issues still, please share your code.

Update:

It's the default behaviour of Android to focus first focusable element on fragment / activity. Adding event listeners / timeouts to remove focus from each screen might be annoying, I would prefer using a auto focus view as first element (which will not have any impact on the screen design) of my layout, that would prevent auto focusing on my text fields / search bar.

import { View } from "tns-core-modules/ui/core/view";

export class AutoFocusView extends View {

    createNativeView() {
        if (typeof android !== "undefined") {
            const linearLayout = new android.widget.LinearLayout(this._context);
            linearLayout.setFocusableInTouchMode(true);
            linearLayout.setFocusable(true);
            return linearLayout;
        }
        return super.createNativeView();
    }

    onLoaded() {
        super.onLoaded();
        if (typeof android !== 'undefined') {
            this.requestFocus();
        }
    }

    requestFocus() {
        if (typeof android !== "undefined") {
            const nativeViewProtected = this.nativeViewProtected;
            nativeViewProtected.requestFocus();
        }
    }
}

Playground Sample

DismissSoftInput() for search-bar for Nativescript-Vue

Updated:

1 Answers