CODEWITHSUNDEEP
nativescript
Raef Akehurst
Raef Akehurst

Reputation: 613

In NativeScript on Android, how do I prevent a SearchBar from gaining focus on page load?

I have a SeachBar inside a ScrollView. In iOS all is good. On Android the ScrollView automatically scrolls to the SearchBar, adds focus to it and displays the soft keyboard. I can hide the softkeyboard by adding android:windowSoftInputMode="stateHidden" as an activity in the AndroidManifest.xml file but I can't work out how to prevent the focus (and hence the auto scroll). Any help would be much appreciated.

Upvotes: 5

Views: 3121

Answers (3)

EricRobertBrewer
EricRobertBrewer

Reputation: 1760

Using Angular2:

app/my.component.html

<StackLayout (loaded)="onSearchLayoutLoaded($event)">
    <SearchBar hint="search here" (loaded)="onSearchBarLoaded($event)">
    </SearchBar>
</StackLayout>

app/my.component.ts

    onSearchLayoutLoaded(event) {
        if (event.object.android) {
            event.object.android.setFocusableInTouchMode(true);
        }
    }

    onSearchBarLoaded(event) {
        if (event.object.android) {
            event.object.android.clearFocus();
        }
    }

This eliminates unnecessarily having to use template reference variables.

Upvotes: 14

Brad Martin
Brad Martin

Reputation: 6177

For Android you need to do a couple of things. If you were using a native Android layout, lets say LinerLayout you would set android:focusableInTouchMode="true" and that should work for most use cases. So with NativeScript you're going to use the associated method on the parent of your SearchBar and then call `clearFocus() on the searchbar.

Example

function removeSearchFocus() {
    // get the parent of the searchbar
    var parent = page.getViewById('parentLayout');
    var searchBar = page.getViewById('mySearchBar');
    if (parent.android) {
        parent.android.setFocusableInTouchMode(true);
        parent.android.setFocusable(true);
        searchBar.android.clearFocus();
    }
}

Then attach this function to one of the page navigation event, or dump the important pieces into a current page event you might already have in your app. Just assign the parent an ID and the SearchBar so you can get it by the ID and this should work.

Upvotes: 8

Emil Oberg
Emil Oberg

Reputation: 4056

How about adding a endEditing to the page loaded or loading event?

searchBar = page.getViewById('your-searchbar');
searchBar.ios.endEditing(true);

or set focus to another element, where you want the focus to be, e.g.

somethingElse = page.getViewById('your-top-bar');
somethingElse.focus();

Upvotes: 0

Related Questions