Nativescript: Can't remove focus of SearchBar

[dzfweb]

I tried to remove the focus of my SearchBar element, but without success.

This is my code:
view.html

<TabView #element [(ngModel)]="tabSelectedIndex" (selectedIndexChanged)="tabViewChange($event)" selectedColor="#ff0000" tabsBackgroundColor="#ffffff">
    <template tabItem [title]="pendingTitle">
        <StackLayout orientation="vertical">
            <SearchBar #sb hint="Pesquisar..." [text]="searchFilter" (clear)="onClear()" (textChange)="list(sb.text)" (submit)="list(sb.text)" (loaded)="onSearchBarLoaded($event)"></SearchBar>
            <ListView [items]="pendingPacks">
                <template let-item="item" let-i="index" let-dataitem="item">
                    <GridLayout rows="40, 25, 25, 25, 35, 40" columns="*, *, *" class="pack-list-view" (tap)="packageDetail(item.id)">
                        <label class="item-header" row="0" colSpan="3" [text]='item.order.receiverName'></label>

                        <label col="0" row="1" text='Endereço'></label>
                        <label col="1" row="1" colSpan="2" [text]="item.order.address.getFullAddress()"></label>

                        <label col="0" row="2" text='Nº: Pedido'></label>
                        <label col="1" row="2" colSpan="2" [text]="item.order.orderNumber"></label>

                        <label col="0" row="3" text='Pagamento'></label>
                        <label col="1" row="3" colSpan="2" [text]="item.order.paymentType"></label>

                        <label col="0" row="4" text='CEP'></label>
                        <label col="1" row="4" colSpan="2" [text]="item.order.address.zip"></label>

                        <Button text="DETALHES" row="5" col="0" (tap)="packageDetail(item.id)"></Button>
                        <Button text="ENDEREÇO" row="5" col="1" (tap)="packageAddress(item.id)"></Button>
                        <Button text="BAIXAR" row="5" col="2" (tap)="packageCheckout(item.id)"></Button>
                    </GridLayout>
                </template>
            </ListView>
        </StackLayout>
    </template>
</TabView>

and this is my callback functions:

tabViewChange(event) {
        if (event.object.android) {
            console.log('cleared');
            event.object.android.setFocusableInTouchMode(true);
        }
    }

    onSearchBarLoaded(event) {
        if (event.object.android) {
            console.log('cleared');
            event.object.android.clearFocus();
        }
    }

My tns info:
nativescript: 2.5.1
tns-core-moduls: 2.5.1
tns-android 2.5.0

[tsonevn]

Hi @dzfweb,
Thank you for contacting us.

For your case, you could use dismissSoftInput(), which will help you to hide the keyboard, when you navigating between different tabs of the view. To be able to lose focus on SearchBar loaded event, clearFocus method should work for you. I am attaching sample code:
HTML

<TabView #tabview [selectedIndex]="tabindex" (selectedIndexChanged)="indexChanged($event)" sdkExampleTitle sdkToggleNavButton>
    <StackLayout *tabItem="{title: 'NativeScript'}">
        <SearchBar id="searchbarid" (loaded)="sBLoaded($event)" #sb hint="Search" [text]="searchPhrase" (clear)="onClear($event)" (submit)="onSubmit(sb.text)"></SearchBar>
        <Label text="NativeScript" class="m-15 h2 text-left" color="blue"></Label>
        <ScrollView>
            <Label [text]="content" textWrap="true" class="m-15"></Label>
        </ScrollView>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Icon'}">
        <Image class="m-t-30 m-b-15" src="res://icon" width="80" height="80"></Image>
        <Label text="NativeScript" textWrap="true" class="h2 m-x-auto" color="blue"></Label>
    </StackLayout>
</TabView>

TypeScript

import { Component } from "@angular/core";
import {SearchBar} from "ui/search-bar";
import {isAndroid} from "platform";
import {Page} from "ui/page"

@Component({
    selector: "ns-app",
    templateUrl: "app.component.html",
})
export class AppComponent { 
    public searchPhrase: string;

    constructor(private page:Page){}

    public onSubmit(value) {

        var searchbar:SearchBar = <SearchBar>this.page.getViewById("searchbarid");

        searchbar.dismissSoftInput();
        console.log("You are searching for " + value);
    }
    public sBLoaded(args){
        var searchbar:SearchBar = <SearchBar>args.object;
        if(isAndroid){

            searchbar.android.clearFocus();
        }
    }
    public onClear(args){
        var searchbar:SearchBar = <SearchBar>args.object;

        searchbar.dismissSoftInput();
    }

    public indexChanged(args){
        var searchbar:SearchBar = <SearchBar>this.page.getViewById("searchbarid");

        searchbar.dismissSoftInput();
    }
}

Let me know, whether this helps or if I could assist you further.

[dzfweb]

@tsonevn you posted wrong code for the TypeScript code example :/

[dzfweb]

Using:

event.object.android.setFocusable(false);

on loaded event works for me;

[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.