Выпадающее меню ngb с полем ввода не работает должным образом

Я работаю с ngb-dropdown. Я попытался добавить поле ввода в раскрывающийся список. Когда я сосредотачиваюсь на поле ввода, всплывающее окно закрывается.

Есть ли способ сохранить фокус ввода и открывать раскрывающийся список

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

Другие пользователи отметили ваш вопрос как низкое качество и необходимость улучшения. Я переформулировал / отформатировал ваш ввод, чтобы его было легче читать / понимать. Просмотрите мои изменения, чтобы убедиться, что они отражают ваши намерения. Но я думаю, что на ваш вопрос пока нет ответа. Ты должен ответить редактировать на ваш вопрос сейчас, чтобы добавить недостающие детали (см. минимальный воспроизводимый пример)). Не стесняйтесь писать мне комментарий, если у вас есть дополнительные вопросы или отзывы для меня.

GhostCat 10.09.2018 10:11

Просто ссылка на другой сайт для все, ваш код не работает. У вас действительно должен быть минимальный воспроизводимый пример здесь, в вашем вопросе.

GhostCat 10.09.2018 10:12
1
2
467
1

Ответы 1

To stay the focus on the input field and to make dropdown remain open. You need to add:

[autoClose]="'outside'" вместе с директивой ngbDropdown.

"outside" - the dropdown will close only on the outside clicks and not on menu clicks.

Вот ваш файл с именем: dropdown-basic.html успешно реплицирован

 <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>

Для получения дополнительной информации посетите здесь.

Другие вопросы по теме