ERROR TypeError: Cannot read property ‘isEventFrom’

Bug description:

Hello world. since i update the version of ng boostrap from 1.0.0 to 1.1.2 I have an error in my web console.

image

Link to minimally-working plunker that reproduces the issue:

I have issue on this piece of code:

<div ngbDropdown class="dropdown" #myDropGlobal="ngbDropdown">and
<div ngbDropdown class="dropdown">
wich seems good.

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 5

ng-bootstrap: 1.1.2

Bootstrap: 4.0.0-beta

6 thoughts on “ERROR TypeError: Cannot read property ‘isEventFrom’

  1. I have the same. In version 1.0.0 it was

    NgbDropdown.prototype._isEventFromToggle = function ($event) { return this._toggle ? this._toggle.isEventFrom($event) : false; };

    but in 1.1.2 it’s become

    NgbDropdown.prototype._isEventFromToggle = function($event) { return this._anchor.isEventFrom($event); }
    That can be a cause of problem. Downgrading to 1.0.0 helps me.

  2. @vlafargue we need a minimal reproduce scenario in a plunker / stackblitz. Please provide one or it is not actionable and will be closed. You can start by modifying this stackblitz: https://stackblitz.com/edit/angular-tqqjmj?file=app/dropdown-basic.html

    Please note that you must use one of the NgbDropdownToggle or NgbDropdownAnchor directives inside ngbDropdown so we know where to position a dropdown menu window: https://ng-bootstrap.github.io/#/components/dropdown/api.

  3. @andrewlistopadov downgrading version without understanding the root cause is not the approach you can recommend long-term as you would be stuck in a particular version of the library.

    If you want to help and believe that you are facing the same issue, please provide a minimal reproduce scenario as indicated in the issue template and my previous comment.

  4. @pkozlowski-opensource thanks for the clarification, in our case ngbDropdownToggle was available only after ngbDropdown was created, wrong code snippet bellow

          <div ngbDropdown>
            <button ngbDropdownToggle *ngIf="showButton()">Btn</button>
            <ul ngbDropdownMenu>
              <li *ngFor="let item of items">
                <button (click)="actionOnItem(item)">{{item.name}}</button>
              </li>
            </ul>
          </div>