input with custom search result , how to change focus to jump over the results

Question

I'm making a custom search input like bellow

   <input type="text" (keyup)="search()">

   <ul>
      <li  *ngFor='let item of results'>{{item}}</li> // Angular2 syntax for repeating over my array
   </ul>


  search(){
       //do the search : 

      // then attach the resuls

      this.results = apiResponse;

  }

This is working and all good.

Now I'm wondering how I can implement the functionality where if user is focused in the input and there are some results bellow the input ( in the ul ) , then if he presses the down arrow key in the keyboard , I would want to change the focus of the input and jump over the result so user can press enter and pick on of them.

Like google or all the other search inputs do .

Forgive me if I can't explain it correctly , it's hard to explain though.

Thanks in advance.

EDIT :

After some google , realized I can capture the keydown , keycode and if the keycode is downkey , I can focus on the first li element , BUT , this is not working , even after setting the tabindex.

   <input tabindex="-1" type="text" (keyup)="search($event)">

   <ul tabindex="0">
      <li tabindex="{{i}}" *ngFor='let item of results ; let i = index'>{{item}}</li> // Angular2 syntax for repeating over my array
   </ul>


  search($event){
       //do the search : 

      // then attach the results;

      if($event.keykode===40)// on down key
      {
           let li = this._el.nativeElement.querySelectorAll('li')[0];
           // I've got the li here , it's good
           li.focus(); ----->>>>>>>> not working !!!!
          // we don't want to trigger api search any more , so returning 
         return ;
      }
      this.results = apiResponse;

  }

Even if I inspect the li element via chrome dev tools and do $0.focus() , nothing happens .!!

EDIT :

Adding screenshot of the list :

This is a long list , it starts from 1 , not 11 (removed couple of lis to make the screenshot smaller).

That's a very ugly way to do this in Angular2. See http://stackoverflow.com/questions/34522306/angular-2-focus-on-newly-added-input-element for a way to focus an element. — Günter Zöchbauer, Jun 04 '16 at 09:58
@GünterZöchbauer , I expect to element to be focused , I have created some css :focus things for this ul and li s , and , normally it should be outlined . The focus is working with mouse , — , Jun 04 '16 at 10:40
I think it should work. Have you checked the `li.focus();` line is actually executed? — Günter Zöchbauer, Jun 04 '16 at 10:42
@GünterZöchbauer , I know I can create a directive , which I actually had in my real code , but the problem is about the focus function , not with the code being ugly or not . This question is more about javascript than Angular2 anyway. — , Jun 04 '16 at 10:42
@GünterZöchbauer , like I said , the focus is not working even with chome dev tools . — , Jun 04 '16 at 10:43

score 3 · Answer 1 · edited Jun 04 '16 at 16:37

3

update

Working example Plunker

@Directive({selector : '[myFocus]'})
class MyFocus {
  constructor(public renderer: Renderer, public elementRef: ElementRef) {}
  focus() {
    this.renderer.invokeElementMethod(
      this.elementRef.nativeElement, 'focus', []);
  }
}
@Component({
  selector: 'my-app',
  styles: [`li:focus { border: solid 3px red;}`],
  template: `
    <input tabindex="-1" type="text" (keyup)="search($event)">
    <ul tabindex="0">
      <li myFocus [tabindex]="i" *ngFor='let item of results ; let i = index'>{{item}}</li>
    </ul>`,
  directives: [MyFocus]
})
export class App {
  @ViewChildren(MyFocus) lis:QueryList<MyFocus>;
  results = ['a', 'b', 'c'];
  search(event) {
    this.lis.toArray()[0].focus();
  }

original

"i" is not a valid tabindex value. It should be one of

<li [tabindex]="i" 
<li [attr.tabindex]="i" 
<li tabindex="{{i}}" 
<li attr.tabindex="{{i}}"

If the attribute doesn't start with * or the attribute name is not wrapped with [] or () or the value doesn't contain {{}} then Angular doesn't do anything with it and it is added to the DOM as is.

edited Jun 04 '16 at 16:37

Mark Rajcok

362,217
114
495
492

answered Jun 04 '16 at 10:46

Günter Zöchbauer

623,577
216
2,003
1,567

If this solves your problem would you mind accepting the answer (checkmark below the up/downvote button) to make it obvious the question is answered? – Günter Zöchbauer Jun 04 '16 at 11:32
This is not fixing the issue for me , that was just a typo in the code that I've written here – Jun 04 '16 at 11:37
That wasn't clear to me from your comment. I hope the downvote is not from you. I'm not responsible for your typos. If you can't focus the element even in devtools then it has to be an issue with `tabindex`, not with `li.focus()` in your code. – Günter Zöchbauer Jun 04 '16 at 11:39
Did you check the `tabIndex` attribute in devtools? – Günter Zöchbauer Jun 04 '16 at 11:46
I added a Plunker. – Günter Zöchbauer Jun 04 '16 at 11:57

score 2 · Accepted Answer · answered Jun 04 '16 at 13:35

I stole Gunter's Plunker example, just because I'm lazy, and changed and extended the it's functionality .

Although mine is completely different than Gunter's one.

The problem with the directive that Gunter has written is that he hasn't separated the directive and the component concerns completely.

I can see that he's calling focus function of the MyFocus directive from the component class, which is not a good idea , because practically a component should not be aware of the insides methods of a directive .

I've also added up and down and enter so you can fully enjoy a free fantastic directive :)

There you go : Focuser Directive in Plunker

import {Component, ElementRef, Directive, ViewChildren, Renderer, QueryList} from '@angular/core'
import {EventEmitter , Input , AfterViewInit } from '@angular/core';
import { BrowserDomAdapter } from "@angular/platform-browser/src/browser/browser_adapter";

@Directive( {
    selector : '[focuser]' ,
    host     : {
        '(keydown)'       : 'onKeydown($event)' ,
        '(keydown.enter)' : 'onEnterPressed()'
    } ,
    outputs  : [ 'enterpress' , 'focusOut' ]
} )
export class FocuserDirective implements AfterViewInit {
    @Input( 'focuser' ) parentEvent : EventEmitter<string>;
    @Input( 'hasList' ) hasList : boolean;
    private lastTabindex  = -1;
    private enterpress    = new EventEmitter<number>();
    private focusOut      = new EventEmitter<string>();
    private listElements;
    private liScrolHeight = 0;
    private domAdapter : BrowserDomAdapter;

    ngAfterViewInit () : any {
        this.parentEvent.subscribe( ()=> {
            this._renderer.invokeElementMethod( this._el.nativeElement , 'focus' , [] );
            if ( this.hasList ) {
                this.listElements  = this.domAdapter.querySelectorAll( this._el.nativeElement , 'li' );
                if(this.listElements){
                    this.liScrolHeight = this.domAdapter.getProperty( this.listElements[ 0 ] , 'scrollHeight' );
                    this.next();
                }
            }
        } );
        return undefined;
    }

    private onKeydown ( $event ) {
        if ( !this.hasList ) {
            return;
        }
        let keyCode = $event.keyCode;
        if ( keyCode === KeyCodes.DOWN ) {
            this.next();
        } else if ( keyCode === KeyCodes.UP ) {
            this.prev();
        } else {
            $event.preventDefault();
        }
    }

    private onEnterPressed () {
        if ( !this.hasList ) {
            return;
        }
        this.enterpress.emit( this.lastTabindex );
    }

    constructor ( private _el : ElementRef , private _renderer : Renderer ) {
        this.domAdapter = new BrowserDomAdapter();
    }

    private prev () {
        this.lastTabindex--;
        if ( this.lastTabindex === -1 ) {
            this.onFocusOut();
            return;
        }
        this.setScrollTopAndFocus();
    }

    private next () {
        if ( this.lastTabindex === this.listElements.length - 1 ) {
            return;
        }
        this.lastTabindex++;
        this.setScrollTopAndFocus();
    }

    private setScrollTopAndFocus () {
        this._renderer.setElementProperty( this._el.nativeElement , 'scrollTop' , this.lastTabindex * this.liScrolHeight );
        this._renderer.invokeElementMethod( this.listElements[ this.lastTabindex ] , 'focus' , [] );
    }

    private onFocusOut () {
        this.focusOut.emit( 'focus out' );
    }
}







@Component({
  selector: 'my-app',
  providers: [],
  styles: [`li:focus { background-color: yellow;}`],
  template: `
   <input [focuser]='$focusInput' tabindex="-1" type="text" (keyup)="onSearch($event)">

   <focuser [focuser]="$focus" hasList='true' (focusOut)="onListFocusOut()" (enterpress)='onSelect($event)'>
      <br>
      Try pressing down or up or enter !!!!!!!!!
      <br>
      <ul tabindex="0">
        <li  [tabindex]="i" *ngFor='let item of results ; let i = index'>{{item}}</li> 
     </ul>

     selected : 
      <ul >
        <li   *ngFor='let item of selected'>{{item}}</li> 
     </ul>

   </focuser>
  `,
  directives: [FocuserDirective]
})
export class App {
  private $focus = new EventEmitter<string>()
  private $focusInput = new EventEmitter<string>()
  private selected = [];
  results = ['Iran is beautiful', 'Angular2 is great', 'We love you all ']

  constructor() {
    this.name = 'Angular2 (Release Candidate!)'
  }

  onSearch($event) {
    console.log('$event',$event.keyCode);
    if($event.keyCode===40){
      this.$focus.emit('Please focus mr directive !');
    }
  }
  private onListFocusOut(){
    this.$focusInput.emit('please focus on my input');
  }
  private onSelect(index){
    this.selected.push(this.results[index])
  }
}
export abstract class KeyCodes {
    static LEFT      = 37;
    static UP        = 38;
    static RIGHT     = 39;
    static DOWN      = 40;
    static BACKSPACE = 8;
    static ENTER     = 13;
    static ARROWS    = [ 37 , 38 , 39 , 40 ];
}

"he's calling focus function of the MyFocus directive from the component class, which is not a good idea, because practically a component should not be aware of the insides methods of a directive". I disagree. `focus()` is a public method, not something internal, hence it is part of the directive's public API, hence users of the directive are free to call it. — Mark Rajcok, Jun 04 '16 at 16:27
Using EventEmitter for anything other than an Output property is an [anti-pattern](http://stackoverflow.com/questions/36076700/what-is-the-proper-use-of-an-eventemitter). — Mark Rajcok, Jun 04 '16 at 16:28
@MarkRajcok , I read the post . First of all , it's really dodgy how Angular team talks about Observables in every IO you can find in youtube , and at the end they're saying that don't count on it ! And second of all , they're saying use for emitting event between components and directives , which is exactly what I did in the answer , I'd only ever used emit event . — Milad, Jun 04 '16 at 17:58
And creating a "public api" for a directive is really not something you want to do , it's called tightly coupling , your calling it public api , but what if I want to change this directive to another new one ? Should my new directive also have a public focus method ? — Milad, Jun 04 '16 at 18:01
Good discussion. It seems they want EventEmitter to be reserved for Output properties. `emit()`ting down to a child feels wrong/awkward. To me, input property `parentEvent` is as much a part of the public API as is `focus()`. If you can use `parentEvent`, you can use `focus()`. So we can ask the same rhetorical question: If we want to change the directive to another one, should the new one also have a `parentEvent` input property? Maybe you feel that only input properties should be part of the directive's public API. I can see that. This sounds like a good topic for the style guide. — Mark Rajcok, Jun 04 '16 at 21:06

input with custom search result , how to change focus to jump over the results

2 Answers2