Nativescript: SearchBar focused after navigating to second page

[tsonevn]

In case you navigate to second page, which has SearchBar, SearchBar would be auto-focused. Using dismissSoftInput method on page loaded event will not hide the keyboard
One possible way is to use Android native code.

Workaround
page.xml

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="onLoaded">
    <StackLayout>
        <SearchBar id="searchBar" hint="Search" text="" submit="onSubmit2" loaded="searchbarloaded"/>
    </StackLayout>
</Page>

page.ts

import { EventData} from "data/observable";
import { Page } from "ui/page";
import {SearchBar} from "ui/search-bar";
import {isAndroid} from "platform";

export function onLoaded(args: EventData){
    var page = <Page>args.object;
    var searchbarElement = <SearchBar>page.getViewById("searchBar");
    if(isAndroid){
        searchbarElement.android.clearFocus();
    }
}

I am attaching sample project, where this problem has been reproduced.

• CLI:2.1.0
• Cross-platform modules: 2.1.0
• Runtime(s): tns-android:2.1.1

[giordy]

If you're using Angular2:

<StackLayout>
        <SearchBar class="search-bar" (loaded)="onSearchBarLoaded()" #searchBar></SearchBar>
</StackLayout>

and the relevant portion of code:

import { SearchBar } from "ui/search-bar";
import {isAndroid} from "platform";

[...]

    onSearchBarLoaded(){
        if(isAndroid) {
            this.searchBarElement.nativeElement.android.clearFocus();
        }
    }

[hamorphis]

That is the default Android behavior. You could either clear the focus when the page is loaded or you can make the SearchBar parent layout focusable so it gets the focus first.

[meysam-mahmoodi]

Hey guys
I have a similar problem. I have a component, discoverComponent, that there is a searchbar inside it. when the component load everything will be ok but when the component is loaded inside of another component, loaded event doesn't load and searchbar get focus.
discover.component.html

        <FlexboxLayout flexDirection="column" height="180">
          <SearchBar id="searchbar" row="1" width="100%" hint="Search ..."  height="100%" (loaded)="onSearchBarLoaded($event)"></SearchBar>
        </FlexboxLayout>

categories.component.html

  <FlexboxLayout width="100%" class="main" *ngIf="!displayListFlag">
    <app-discover></app-discover>
  </FlexboxLayout>

unfocusing doesn't work when my component load inside of another component as child.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.