CODEWITHSUNDEEP
nativescriptnativescript-angular
Raj
Raj

Reputation: 487

Nativescript 6.0 How to get the focuschangeListener for Searchbar in Android

I implement the project in Nativescript angular. In nativescript 5.0 I was get the focus change listener using the following code. After updating 6.0 I face the issue in android.

Reason: The Search bar extends the androidx widget anyone help how to fix the issue in 6.0.

<SearchBar id="searchBarMall"
        [hint]="searchMall" (loaded)="searchBarloaded($event)"
        (textChange)="onTextChanged($event)" (clear)="onClear($event)"
        (submit)="onSubmit($event)"
        textFieldHintColor="gray"></SearchBar>

Typescript

import { SearchBar } from "tns-core-modules/ui/search-bar";
import { Component, OnInit } from "@angular/core";
import { Page, isAndroid } from "tns-core-modules/ui/page";

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html",
    styleUrls: ["./home.component.css"]
})
export class HomeComponent implements OnInit {
    searchPhrase: string;
    private searchbar: any;
    onSearchSubmit(args): void {
        let searchBar = <SearchBar>args.object;
        console.log("You are searching for " + searchBar.text);
    }


    constructor(private _page: Page) {
    }

    ngOnInit(): void {
    }

    searchBarloaded(args) {
        if (isAndroid) {
            let self = this;
            let searchBar = <SearchBar>args.object;
            searchBar.android.setOnQueryTextFocusChangeListener(new android.view.View.OnFocusChangeListener({
                onFocusChange: function (v: any, hasFocus: boolean) {
                    console.log("Focus" + hasFocus);
                }
            }));
            this.searchbar.android.setFocusable(false);
            this.searchbar.android.clearFocus();
        }
    }

    ngAfterViewInit() {
        this.searchbar = <SearchBar>this._page.getViewById("searchBarMall");
    }
}

Upvotes: 0

Views: 225

Answers (1)

Manoj
Manoj

Reputation: 21908

Use setOnQueryTextFocusChangeListener on nativeView.

this.searchbar.android.setOnQueryTextFocusChangeListener(new android.view.View.OnFocusChangeListener({
                onFocusChange:function(v : any , hasFocus:boolean){
                    if(hasFocus){
                       ...
                    }else{
                        ...
                    }
                }
            }));

Upvotes: 1

Related Questions