Ionic-framework: Allow ion-searchbar input to automatically receive focus

[SP1966]

Short description of the problem:

In my use case I have the ion-searchbar hidden to preserve screen space. When the user taps the search button in the navbar the ion-searchbar is displayed. The user has to then tap the input in the ion-searchbar for it to receive focus and open the keyboard.

What behavior are you expecting?

It would be a better user experience if simply tapping the search button displayed the ion-searchbar, set the focus to it's input, and opened the keyboard.

Basically all we need is the ability to add a local variable "#input" to the ion-searchbar component which we could then use to set focus and open the keyboard as done in Mike Hartington's blog post!

http://mhartington.io/post/setting-input-focus/

Ionic version 2 beta 3.

[brandyscarney]

So I think this is something that should be handled by the addition of the 3rd type of searchbar (number 1 in this image):

There was an open issue to do this but I don't think it got moved here. Will keep this one open for it.

[aluknot]

Yes, this is something really necessary!

[kentongray]

i think even better would be support for the autofocus attribute

[kentongray]

For those who come to this post, simple workaround about creating a [focuser] directive

import {Directive, Renderer, ElementRef} from "angular2/core";
@Directive({
  selector : '[focuser]'
})
export default class Focuser {
  constructor(public renderer: Renderer, public elementRef: ElementRef) {}

  ngOnInit() {
    //search bar is wrapped with a div so we get the child input
    const searchInput = this.elementRef.nativeElement.querySelector('input');
    setTimeout(() => {
      //delay required or ionic styling gets finicky
      this.renderer.invokeElementMethod(searchInput, 'focus', []);
    }, 0);
  }
}

<ion-searchbar [focuser] placeholder="Enter Your Address"></ion-searchbar>

Make sure to add Focuser to your directives then bingo

[jgw96]

@SP1966 Hey! Are you still experiencing this issue or are you using the workaround above? As you can see this issue is marked for beta.12, so at this point you can expect it to be fixed in that release. Thanks!

[kentongray]

@jgw96 I was using the latest beta last night and still had this problem (unless I missed something in the docs)

[jgw96]

@kentongray I expected you would still be having a problem. Like i said earlier this issue is marked for beta.12 at this point, so you can expect a fix in that release! Until then, i would recommend continuing to use your workaround. Thanks again!

[SP1966]

@jgw96 I gave your idea a try and it's not working. I have the searchbar hidden initially and toggle it into view when needed. If I set it toggled into the view as it's initial state then it works great, but when it's toggled in after the page loads it's a no go.

Thanks for the reply though! I'm looking forward to each new beta!!

[jgw96]

@SP1966 Hmmm sorry it didnt work! We moved this down to the beta.7 milestone now, so you can expect a fix even sooner now! Thanks for using Ionic!

[bryancordrey]

@jgw96 @brandyscarney It looks like I'm trying to solve this exact issue. Has there been any progress to rolling this into a beta release? Is there anything I could do to help out?

[brandyscarney]

Hey @bryancordrey, sorry I know this issue has been passed around a bit. We reorganize the issues sometimes and things end up getting bumped around. It is currently set for beta 9 but as you can see this is subject to change. I haven't had any time to look into this but I will try to look into it once we release beta 8.

If anyone wants to submit a PR for any part of it, that would be helpful to getting this in faster. I've added some steps to our contributing doc if anyone is interested: https://github.com/driftyco/ionic/blob/2.0/CONTRIBUTING.md#creating-a-pull-request

Thanks. :smile:

[adamdbradley]

For some more background here, on touch devices it is difficult to programmatically focus an element. Sounds like an easy task yes, and on desktop it works fine, but to set focus on an input element and expect the keyboard to come up, the element.focus() command must be called within a user's touch event's callstack.

[zbarbuto]

@adamdbradley as @brandyscarney mentioned this is best handled in the search bar that appears in the header bar. If that's the case it's likely that it appears when a new view has just been pushed i.e. the user tapped a link to open some sort of "search" view? Perhaps that is something that can be tapped into?

[dtelaroli]

+1

[ghenry22]

Interestingly with beta10 on android on a Samsung s7 with all updates search does automatically get focus for me. In my app I have a button in the nav bar that shows or hides the search bar embedded in the navbar on demand. When I click to show the search bar on android it shows, receives focus and the keyboard opens, just like native it's great.

iOS does not do this unfortunately but it would be great if it did!

[royipressburger]

+1

[maxtuzz]

+1

[cleever]

Besides autofocus, ion-searchbar should have an option to always show the back button.
Like the Whatsapp behavior on his search contact modal.

[maxtuzz]

^ +1!!! Instagram does the same thing with their search feature.

These are the two things my search feature really needs too.

[chrishawn]

so what's the story on this now? any support? beta 11 seems to have broken the work around on ios

[rodriguesgm]

@kentongray this solutions seems to not work on iOS.. when I add this directive and open the view with it, I get a blank screen. If I click in the screen the view appears but the focus doesn't work.
I don't know if I'm missing something, but if I remove the directive the view open normally...

[manucorporat]

@cleever @maxtuzz

Besides autofocus, ion-searchbar should have an option to always show the back button.
Like the Whatsapp behavior on his search contact modal.

can you open an different issue for that? thanks!

[cleever]

@manucorporat sure!

https://github.com/driftyco/ionic/issues/8220

[gigocabrera]

+1

[alan-agius4]

Any fix for this issue?

[vicatcu]

@brandyscarney now that Ionic2 is out of beta, what's the new target milestone for solving this one? I saw in the code that there is a setFocus method, but it doesn't actually do anything afaict? I haven't tried with ionic run android, but certainly nothing happens in ionic serve browser context.

[jgw96]

This issue was moved to driftyco/ionic-feature-requests#118

[jgw96]

Hello everyone! Thanks for the feature request. I'm going to move this issue over to our internal list of feature requests for evaluation. We are continually prioritizing all requests that we receive with outstanding issues. We are extremely grateful for your feedback, but it may not always be our next priority. I'll copy the issue back to this repository when we have begun implementation. Thanks!

[shyamal890]

+1

[PurpleEdge2214]

As we near the 12 month anniversary of this request, sorry to be rude, but why does this come to mind?

http://dilbert.com/strip/2002-11-17

[glozano]

+1

[RamsesDzita]

Hi,
I'am new in ionic , please how to make a searchbar like the one @SP1966 is talking here ?
thanks in advance

[jasmeetdd]

+1

[shyamal890]

Sometimes a product dies because the maintainers don't value their users' feedback and suggestions.

[jgw96]

Hello all! While we have locked this issue this is still a feature that we are considering adding to ionic in the future. We work on a prioritized queue and are currently working on other issues. However, the awesome thing about open source is that anyone can submit a PR to add this feature, and, if you would be interested in doing this we'd be happy to work with you. Thanks for using Ionic everyone!