Problem with hiding keyboard from search bar on page load


#1

how do I use dismissSoftInput to remove focus from search bar on page load in NS-vue?


#2

Nothing special you actually have to do when using Vue, just add loaded event to page and call dismissSoftInput() on the textfield’s reference.


#3

ok thanks would try it out


#4
I did that but still didn't work.

#5

Please create a playground where I can see your issue, so I may able to fix that.


#7

Sorry, please use playground, I’m unsure you followed the steps nor what is inside dismissSoftInput method.


#9

There it is, pls take a look


#10

Come on man, You mentioned you are using Vue but the playground is built on Angular template.

Besides, I don’t see you defined dismissSoftInput anywhere. What I meant was to call dismissSoftInput method on the text field instance.


#11

sorry about that , I thought you only wanted to see the code itself,
https://play.nativescript.org/?template=play-vue&id=VC8ZT8.

Check the first search bar for the loaded event if I’m right.


#12

You don’t have to dump all your code, you just had to make a simple example where your issue can be demonstrated. Neither you haven’t copied any of your method. Here is a simple playground example I made,

You may create a auto focus field in case if you are interested in completely removing focus, I have an example made for {N} core here. For Vue.js the only change will be registering the component and adding method in Vue.js pattern.


#13

Thanks man, I finally got it working, and if you’ve got tutorials on NS-Vue kindly let me know.


#14

Hello, how are you.
I’m using that function but it does not hide the keyboard when I start the application. What could it be ?

public searchBarLoaded(args){
        let searchBar = <SearchBar>args.object;
        searchBar.dismissSoftInput();
        
        if (isAndroid) {
            searchBar.android.clearFocus();
        }
        searchBar.text = "";
    }```

<SearchBar row="0" id="searchBar" hint="Buscar tienda" (textChange)="onTextChange($event)" (loaded)="searchBarLoaded($event)"
                                        (submit)="onSubmit($event)" class="search-bar"></SearchBar>

#15

Simply add a timeout,

let searchBar = <SearchBar>args.object;
setTimeout(()=>{
 searchBar.dismissSoftInput();
}, 100);

But personally I prefer adding a focusable view above my fist text field on the page, so I don’t have to listen for events, dismiss keyboard etc., If you want to use it in Angular, just use register element before adding it to your page.