Фокус переключается на кнопку, когда тип UIB не дает результатов - PullRequest
Новая
       11

Фокус переключается на кнопку, когда тип UIB не дает результатов

0 голосов
/ 01 марта 2019

У меня есть форма с полями typeahead (UI Bootstrap 2.5.0, Angularjs 1.6.9). Это должно работать так : после того, как пользователь выберет опцию в последнем поле, появится следующее пустое.Пользователь может удалить любое поле, нажав на кнопку удаления рядом с каждым полем.Любая опция может быть выбрана только один раз.

Однако , если у пользователя нет вариантов выбора, но он все еще что-то набирает и нажимает Enter - тогда первая строка исчезает.

Это связано с тем, что фокус переключается с этого поля ввода на первую кнопку удаления.Если кнопки delete отключены из HTML - этого не происходит.Если тег <form> удален из html - опять этого не происходит.

Я исправил это, удалив тег <form>, поскольку он мне действительно не нужен, но если я не смог этого сделать, какМогу ли я контролировать способ переключения фокуса?Это действительно сбивает с толку пользователя, и мне было трудно его отлаживать.

https://plnkr.co/edit/D8lReA5ha6CDbPzMufdI?p=preview

Форма: 

<div class="modal-body">      
      <form name="linkSelectorForm">            
        <div class="panel-body">
          <div ng-repeat="link in links track by $index" class="input-group">
            <div class="form-group">
              <div class="input-group">
                <input ngFocus=""
                    class="form-control"
                    type="text"
                    ng-model="links[$index]"
                    typeahead-on-select="addNextField($item, $index, $last, $first)"
                    uib-typeahead="state for state in getStates()"
                    typeahead-min-length="0"
                    autocomplete="off"
                    typeahead-editable="false"
                    ng-model-options="{updateOn: 'blur', debounce: { 'default': 1, 'blur': 0 }}"/>
                <div class="input-group-btn">                      
                  <!--The red remove button-->
                  <button class="btn btn-danger" ng-click="removeElement($index, $last, link)">                    
                </div>                
              </div>
            </div>
          </div>
        </div>            
      </form>          
    </div>

    <div class="modal-footer">
      <button type="submit" class="btn btn-success" ng-click="ok()" ng-disabled="form.$invalid">OK
      </button>
      <button class="btn btn-danger" ng-click="cancel()">CANCEL</button>
    </div>
  </div>
...