Why focus no work with directive ? Angular

I want when select a value from the drop-down menu to keep my focus on … Read more Why focus no work with directive ? Angular

I want when select a value from the drop-down menu to keep my focus on the drop-down. That is all.

I am created work example:

https://stackblitz.com/edit/ngx-modal-ukfv4m?file=src%2Fapp%2Fform%2Fform.component.html

For test only: go to form component.ts, then uncomment line inside setFocus. Try to select any item from dropdown? You will see focus.

I want the same behavior.

I am create directive

@Directive({ selector: '[dropdownfocus]' })
export class FocusDirective {
  constructor(private dropdown: ElementRef) {}

  @HostListener('click', ['$event'])
  onFocus(evt: KeyboardEvent) {
    alert('selected item from dropdown');
    this.dropdown.nativeElement.focus(); //NO WORK NOT SELECTED
  }
}

I don’t know why no work….

  <div class="btn-group" dropdown>
    <button
      id="dropdown-animated"
      dropdownToggle
      type="button"
      class="btn btn-primary dropdown-toggle"
      aria-controls="dropdown-animated"
    >
      Button dropdown <span class="caret"></span>
    </button>
    <ul
      *dropdownMenu
      class="dropdown-menu"
      role="menu"
      aria-labelledby="button-animated"
      dropdownfocus //HERE IS SELECTOR!
      (click)="setFocus()"
    >
      <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
      <li role="menuitem">
        <a class="dropdown-item" href="#">Another action</a>
      </li>
      <li role="menuitem">
        <a class="dropdown-item" href="#">Something else here</a>
      </li>
    </ul>
  </div>

Source: JavaSript – Stack Overflow



Leave a Reply

Your email address will not be published. Required fields are marked *