@ng-boostrap ngbDropdown is closing when clicking inside of the ngbDropdownMenu

I have a ngbDropdown that I coped from here directly. When I have it in my Angular app clicking on any of these inputs causes the dropdown to close making it impossible to fill out the form. When I try this on the Bootstrap site linked above it works just fine so this is clearly something going on in only my app.

<div ngbDropdown class="d-inline-block">
<button class="btn btn-outline-primary" id="dropdownForm1" ngbDropdownToggle>Toggle
dropdown</button>
<div ngbDropdownMenu aria-labelledby="dropdownForm1">
<form class="px-4 py-3">
<div class="form-group">
<label for="exampleDropdownFormEmail1">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1"
placeholder="email@example.com">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword1">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1"
placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<div class="dropdown-divider"></div>
<button ngbDropdownItem>New around here? Sign up</button>
<button ngbDropdownItem>Forgot password?</button>
</div>
</div>


When I tried to debug the issue in my app I can see that the reason it is closing is because of this code in the @ng-bootstrap library which is ran inside the _setCloseHandlers() on the ngbDropdown class itself.

ngbAutoClose(this._ngZone, this._document, this.autoClose, function () { return _this.close(); }, this._closed$, this._menu ? [this._menuElement.nativeElement] : [], this._anchor ? [this._anchor.getNativeElement()] : []);


The last parameter to this method is the ignoredElements array that bootstrap checks to see if a click occurred inside this element and if so, it will NOT close the dropdown. See code below:

You can see here that if the "element" (in my case its the <input /> from the dropdown) is contained in any of the "ignoredElements" then it should return "false" and therefore NOT close the dropdown. Right now, the only ignored element being passed in is the ngbDropdownToggle element which is a sibling of the ngbDropdownMenu. So rightfully so, the code works as expected and we do not return false here and instead the code progresses to the final else condition that returns true. With that said, I would totally expect the dropdown on the Bootstrap site to behave the same exact way but it doesn't! I can't see the source code on that site so I can't debug it like this on that site, but before I spin up a completely new Angular app just to test this out I figured I would ask here.



Continue reading...