Search code examples
nativescriptnativescript-vue

DismissSoftInput() for search-bar for Nativescript-Vue


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.


Solution

  • 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