Implement dismissSoftInput() for search-bar

[emiloberg]

Feature request:

The search-bar has no way of dismissing an open keyboard. This makes the search-bar a quite unusable as the normal user pattern is that the user search for something and then press the item and gets navigated there. On Android (at least on >= 5.x), the open keyboard will continue to stay open, even on the new page. On iOS it will close.

the editable-text-base, and therefore the text-field, has a dismissSoftInput. Can this be implemented on the search-bar as well?

Related, it should probably have the focus() method as well.

Or am I missing a workaround?

[TobiasHennig]

I have the same problem and discover a bit of a workaround (iOS only):

Option 1: Dismiss input with a "Cancel" button

var searchBar = page.getViewById("search-bar");
if (applicationModule.ios) {
    searchBar.ios.showsCancelButton = true;
}

Option 2: Dismiss input programmatically

var searchBar = page.getViewById("search-bar");
if (applicationModule.ios) {
    searchBar.ios.endEditing(true);
}

[emiloberg]

Alright @TobiasHennig, thanks for getting me to look at the android documentation.

This seems to do the job.

var searchBar = page.getViewById("search-bar");
if (searchBar.ios) {
    searchBar.ios.endEditing(true);
} else if (searchBar.android) {
    searchBar.android.clearFocus();
}

[emiloberg]

And for completness.

As the search-bar inherits from View you can call focus() to set focus on the search-bar and that way make the keyboard visible.

var searchBar = page.getViewById("search-bar");
searchBar.focus()

Footnote: Android seem to set focus on the search-bar when navigating to a page with such on it. iOS does however not.

[leocaseiro]

Hi, I'd like to know how to implement dismissSoftInput for searchBar and how it works.
Any example running?
May I add this to .on(searchBarModule.SearchBar.clearEvent)?

I've tried the code bellow, but nothing happens on IOS device:

exports.pageLoaded = function() {
    var searchBarModule = require('ui/search-bar');
    var searchBar = page.getViewById('searchid');

    searchBar.on(searchBarModule.SearchBar.clearEvent, function(args) {
        console.log('-- Cleanned Search for Contacts');
        searchBar.dismissSoftInput();
    });
};

I also tried:

    searchBar.on(searchBarModule.SearchBar.clearEvent, function(args) {
        if (searchBar.ios) {
            console.log('searchBar.ios');
            searchBar.ios.endEditing(true);
        } else if (searchBar.android) {
            searchBar.android.clearFocus();
        }
    });

My last tried was similar the implementation on editable-text-base.ios.ts:

    searchBar.on(searchBarModule.SearchBar.clearEvent, function(args) {
        if (searchBar.ios) {
            console.log('searchBar.ios');
            searchBar.ios.resignFirstResponder();
        } else if (searchBar.android) {
            searchBar.android.clearFocus();
        }
    });

Update: The only method that works is to show the Cancel button, but it's not what I want

if (searchBar.ios) {
    searchBar.ios.showsCancelButton = true;
}

[EddyVerbruggen]

I like that cancel button thingy! For anyone using that: you can also make it appear animated, like this: searchBar.ios.setShowsCancelButtonAnimated(true, true);

[blaur]

Anyone who have a solution for android? Mine still seems to be behaving very strainge no matter the option I choose from in here.

[dzfweb]

Still need for a solution in android.

[dlucidone]

I'm facing the same problem with search bar. The focus is unset but then on tab view change it gets focus and sometimes the keyboard pops up.Dont know whats the matter with this.

[grasshoppermouse]

Same problem on android. I've tried many different solutions that folks have posted here and on stackoverflow. Some crash my app, others don't work.

[dlucidone]

Really want to fix this keyboard action

[dzfweb]

I solved the keyboard opening, doing the following:

component.html
<SearchBar (loaded)="onSearchBarLoaded($event)"></SearchBar>

component.ts

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

[dlucidone]

@dzfweb I'm having problem in case of tab view and pull to refresh. each time i do any of the thing it gets poped up

[dzfweb]

@dlucidone I have the same case of you, i have 3 tabs, each with a SearchBar.
While navigating on it, the keyboard still not open.

[dlucidone]

@dzfweb I'll try and see if it works. Thanks

[grasshoppermouse]

@dzfweb, your solution seems to work for me. Thanks!

[EddyVerbruggen]

@dzfweb Thanks, that worked for me as well, although I needed 2 tweaks (on Android 4.4.4) I'd like to share:

  onSearchBarLoaded(event) {
    if (event.object.android) {
      setTimeout(() => {
        event.object.dismissSoftInput();
        event.object.android.clearFocus();
      }, 0);
    }
  }

1. I had to wrap it in a timeout, but that's probably depending on when exactly the SearchBar is rendered.
2. I had to remove event.object.android.setFocusable(false); as that required me to tap the field twice before being able to enter anything in it. No side effects thus far.

[lock]

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.