I am working with ngb-dropdown. I tried to add an input field to the dropdown. When I focus on the input field, the popup gets closed.
Is there any way to stay the focus of input and the dropdown to be opened
<div ngbDropdown placement="top-right" class="d-inline-block">
<button class="btn btn-outline-primary" id="dropdownBasic2" ngbDropdownToggle>Toggle dropup</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic2">
<button class="dropdown-item">
<input type="text" />
</button>
<button class="dropdown-item">Action - 1</button>
<button class="dropdown-item">Another Action</button>
<button class="dropdown-item">Something else is here</button>
</div>
</div>
To stay the focus on the input field and to make dropdown remain open. You need to add:
[autoClose]="'outside'"
along with ngbDropdown
directive.
"outside" - the dropdown will close only on the outside clicks and not on menu clicks.
Here is your file named: dropdown-basic.html replicated successfully
<div class="row">
<div class="col">
<div ngbDropdown [autoClose]="'outside'" class="d-inline-block">
<button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button class="dropdown-item">
<input type="text" />
</button>
<button class="dropdown-item">Action - 1</button>
<button class="dropdown-item">Another Action</button>
<button class="dropdown-item">Something else is here</button>
</div>
</div>
</div>
<div class="col text-right">
<div ngbDropdown [autoClose]="'outside'" placement="top-right" class="d-inline-block">
<button class="btn btn-outline-primary" id="dropdownBasic2" ngbDropdownToggle>Toggle dropup</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic2">
<button class="dropdown-item">
<input type="text" />
</button>
<button class="dropdown-item">Action - 1</button>
<button class="dropdown-item">Another Action</button>
<button class="dropdown-item">Something else is here</button>
</div>
</div>
</div>
</div>
For more information visit here