Ngx-bootstrap: [BS-dropdown]How to solve "click outside dropdown cannot work ngx-bootstrap version ^1.9.2" problem temporarily?

[tamvo94]

Hi everyone,
I updated angular to 4.3.6 and ngx-bootstrap to lasted version(^1.9.2).

<div class="btn-group" dropdown [autoClose]="outsideClick">
      <button class="indicator-button" dropdownToggle type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      </button>
      <ul class="dropdown-menu" *dropdownMenu aria-labelledby="dropdownMenu1">
        <li *ngFor="let note of notes">
          <div class="row">abc
          </div>
        </li>
      </ul>
    </div>

But outsideClick cannot work when I clicked outside of dropdown. I read ngx-bootstrap documentation and I find autoClose only support true or false to close dropdown.
I have a solution by use directive to check user click inside or outside dropdown:

@Directive({
  selector: '[dropdownOutsideClick]'
})
export class DropdownOutsideClickDirective {

  constructor(private _elementRef: ElementRef) {
  }

  @Output()
  public onDropdownOutsideClick = new EventEmitter<any>();

  @HostListener('document:click', ['$event.target'])

  public onClick(targetElement) {
    const clickedInside = this._elementRef.nativeElement.contains(targetElement);
    if (!clickedInside) {
      this.onDropdownOutsideClick.emit({clickOutside: true});
    }
  }
}

and
<div [autoClose]="false" dropdown dropdownOutsideClick (onDropdownOutsideClick)="onDropdownOutsideClick($event)" [(isOpen)]="isDropdownOpen">
and set isDropdownOpen = false if has emit from onDropdownOutsideClick to close dropdown if user click outside.

But I think It's not good code and solution.

How to solve "click outside dropdown cannot work ngx-bootstrap version ^1.9.2" problem temporarily?
Thanks.

[IlyaSurmay]

Why don't you use [autoClose]="true"?

[tamvo94]

Hi @IlyaSurmay,
I want to do actions on elements of dropdown that will not close. It only close when I clicked outside of dropdown.
Thanks.

[Anirudh-Konduri]

@tamvo94 Did you find workarounds to achieve this ?

[Walgermo]

@Anirudh-Konduri the workaround is edited in the first post. Confirmed working by me 👍

ngx-bootstrap: 1.9.3
angular: 4.4.6

[valorkin]

Merged and released in v2+

[benj0c]

@valorkin what is merged and released in v2+? How can I now achieve that only outside click close a dropdown?

[JaimicoVII]

A workaround i found is this:

• Set dropdown autoClose to true
  <div dropdown [autoClose]="true">
• Bind a click listener to the parent dropdown-menu
  <div *dropdownMenu class="dropdown-menu" role="combobox" (click)="preventClose($event)">
• And then in your component, the function your calling from the click listener
  preventClose(event: MouseEvent) {
event.stopImmediatePropagation();
}

Hope it works for you @benj0c