angulardrop-down-menuangular-bootstrap

Ngb-dropdown with input field doesn't work as expected


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>

http://plnkr.co/edit/Q4JX2yFA9izPaPelcF9Y?p=preview


Solution

  • 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