Dropdown not work on angular2-modal

[mkjeff]

I am using dropdown directive with angular2-modal

found the issue that drop-down menu didn't auto close, because modal component will prevent the click event bubbling up.

so, I think the window not appropriated listenser target(in /components/dropdown/dropdown.service.ts)

window.document.addEventListener('click', this.closeDropdownBind);

is it possible to change that?

[mkjeff]

I did a temporary work around.

add a rootElement to dropdown directive

class Dropdown {
  @Input()
  public rootElement: HTMLElement;
}

and pass it in host template

<div class="modal-root" #modal>
   <div class="btn-group" dropdown [rootElement]="modal" keyboardNav="true">...</div>
</div>

and dropdown.service can binding event listener to it

class DropdownService {
...
  public open(dropdownScope: Dropdown) {
    if (!this.openScope) {
      if (dropdownScope.rootElement)
        dropdownScope.rootElement.addEventListener('click', this.closeDropdownBind);
      else
        window.document.addEventListener('click', this.closeDropdownBind);
      window.document.addEventListener('keydown', this.keybindFilterBind);
    }
    ...
  }
}

have any better idea?

[mkjeff]

I found a better way, no need to change directive interface.
Uses the third parameter useCapture(true) on addEventListener/removeEventListener.
commit