У меня есть ngbDropdown, с которого я справился здесь напрямую.Когда он отображается в приложении Angular, нажатие любого из этих входов приводит к закрытию раскрывающегося списка, что делает невозможным заполнение формы.Когда я пытаюсь сделать это на сайте Bootstrap, указанном выше, он работает просто отлично, так что это явно происходит только в моем приложении.
<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>
Когда я пытался отладить проблему в моем приложении, я вижу, чтопричина закрытия заключается в том, что этот код в библиотеке @ng-bootstrap находится внутри _setCloseHandlers() самого класса ngbDropdown.
ngbAutoClose(this._ngZone, this._document, this.autoClose, function () { return _this.close(); }, this._closed$, this._menu ? [this._menuElement.nativeElement] : [], this._anchor ? [this._anchor.getNativeElement()] : []);
Последний параметр этого метода - массив ignoredElements, который при начальной загрузке проверяет, произошел ли щелчок внутри этого элемента, и если это так, он НЕ закроет раскрывающийся список.Смотрите код ниже:
Здесь вы можете видеть, что если «элемент» (в моем случае это <input /> из выпадающего списка) содержится в любом из «ignoredElements», то он должен вернуть «false» ипоэтому НЕ закрывайте выпадающий список.Прямо сейчас, единственный игнорируемый передаваемый элемент - это элемент ngbDropdownToggle, который является родственным элементом ngbDropdownMenu.Так правильно, код работает, как и ожидалось, и мы не возвращаем false здесь, а вместо этого код переходит к конечному условию else, которое возвращает true.С учетом вышесказанного я бы полностью ожидал, что выпадающий список на сайте Bootstrap будет вести себя точно так же, но это не так!Я не вижу исходный код на этом сайте, поэтому я не могу отладить его таким образом на этом сайте, но прежде чем я запустил совершенно новое приложение Angular, просто чтобы проверить это, я решил спросить здесь.
