bug(demo): Dropdown "Toggle button dropdown" doesn't close in demo

[iuristona]

The "Toggle button dropdown" doesn't close once it is opened.
Another similiar bug occurs when the dropdownToggle contains childrens.
<a dropdownToggle> <i class="icon-bell"></i> <span class="badge badge-default">7</span> </a>

[erashu212]

Hi @iuristona ,

Did you try adding [(isOpen)]="status.isopen"? If yes please add a plnkr link here .

Thanks

[davidloiret]

Any update on this issue?

[felixkubli]

The problem is, as soon as the opened dropdown looses it's focus, status.isopen will be changed to false. Then, with toggleDropdown($event) it gets changed back to true again.
Therefore, to close the dropdown, status.isopen doesn't need to bee toggled again.

[felixkubli]

I have come up with an almost complete solution to the problem: I defined a second status variable in dropdown-demo.ts, wich only gets toggled you click the "Toggle button dropdown" - button:

export class DropdownDemoComponent {
  public disabled:boolean = false;
  public status:{isopen:boolean, isOpenedByButton:boolean} = {isopen: false, isOpenedByButton: false};
  public items:Array<string> = ['The first choice!',
    'And another choice for you.', 'but wait! A third!'];

  public toggled(open:boolean):void {
    console.log('Dropdown is now: ', open);
  }

  public toggleDropdown($event:MouseEvent):void {
    $event.preventDefault();
    $event.stopPropagation();
    this.status.isOpenedByButton = !this.status.isOpenedByButton;
    this.status.isopen = this.status.isOpenedByButton;
  }
}

The only problem is, that when you close the dropdown by clicking anywhere else in the window, you need to press the button twice to reopen the dropdown, because it first attempts to close it.