Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement dismissSoftInput() for search-bar #849

Closed
emiloberg opened this issue Sep 29, 2015 · 17 comments · Fixed by #956
Closed

Implement dismissSoftInput() for search-bar #849

emiloberg opened this issue Sep 29, 2015 · 17 comments · Fixed by #956
Milestone

Comments

@emiloberg
Copy link

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
Copy link

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

Option 1: Dismiss input with a "Cancel" button
image

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
Copy link
Author

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
Copy link
Author

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.

@N3ll N3ll added this to the 1.5 (Under Review) milestone Oct 12, 2015
@enchev enchev self-assigned this Oct 19, 2015
@enchev enchev added the feature label Oct 19, 2015
@enchev enchev added the done label Oct 19, 2015
@leocaseiro
Copy link
Contributor

leocaseiro commented May 24, 2016

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
Copy link
Contributor

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
Copy link

blaur commented Oct 26, 2016

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
Copy link

dzfweb commented Feb 24, 2017

Still need for a solution in android.

@dlucidone
Copy link

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
Copy link

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
Copy link

Really want to fix this keyboard action

@dzfweb
Copy link

dzfweb commented Mar 16, 2017

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
Copy link

@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
Copy link

dzfweb commented Mar 16, 2017

@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
Copy link

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

@grasshoppermouse
Copy link

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

@EddyVerbruggen
Copy link
Contributor

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

SvetoslavTsenov added a commit that referenced this issue Jun 21, 2017
* Include test for issue #849 from nativescirpt-angular

* Fix tslint
@lock
Copy link

lock bot commented Aug 28, 2019

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.

@lock lock bot locked and limited conversation to collaborators Aug 28, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

10 participants