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.