按 Enter 选择下拉值直接提交表单

Question

我正在使用ui-select，每当我按回车键选择一些搜索结果时，结果就会被选中，表单直接提交。我想不通，有什么问题。

这是我正在使用的HTML

<form>
    <div class="form-group">
        <label class="col-sm-3 control-label">Address</label>
        <div class="col-sm-5">
            <input type="text" ng-model="address.street" class="form-control"  placeholder="e.g. NUST Campus, H-12">        
            <div class="form_wrapper_error">
                <p ng-show='addressError'>{{addressError}}</p>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">City/Town</label>
        <div class="col-sm-5">
            <!-- <location-autocomplete bind-value="address.city" coordinates="cityAddInitialCoordinates" placeholder="e.g. Islamabad"> -->
            <ui-select ng-model="$parent.address.city"
                theme="select2"
                reset-search-input="true"
                title="Select City">
                <ui-select-match allow-clear="true" placeholder="Select City">{{$select.selected}}</ui-select-match>
                <ui-select-choices repeat="city as city in cities track by $index"
                    refresh="refreshLocation($select.search)"
                    refresh-delay="0">
                    <div ng-bind-html="city | highlight: $select.search"></div>
                </ui-select-choices>
            </ui-select>
            <div class="form_wrapper_error">
                <p ng-show='cityError'>{{cityError}}</p>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">Zip</label>
        <div class="col-sm-5">
            <input type="text"  ng-model="address.zip" class="form-control"  placeholder="e.g. 44000">
            <div class="form_wrapper_error">
                <p ng-show='zipError'>{{zipError}}</p>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-8">
            <button class="btn btn-primary buttt" ng-click="addAddress()">Add Address</button>
        </div>
    </div>
</form>

Answer 1

找到的解决方案：我正在使用<button>，按钮的默认类型是提交，所以我必须指定 type="button"，问题已修复....

参考：在 UI 选择拉取请求中找到...

Answer 2

如果有人仍然在这个问题上挣扎，我找到了解决方案\解决方法。将skip-focusser="true"添加到您的 UI 选择中，如下所示：

<ui-select ng-model="$parent.ngModel" theme="bootstrap" class="input-xs" skip-focusser="true">
<ui-select-match >{{$select.selected.description}}</ui-select-match>
<ui-select-choices repeat="item in options | orderBy :'code' | filter: $select.search">
   <div ng-bind-html="item.description | highlight: $select.search"></div>
</ui-select-choices>

这将从选择元素中删除焦点，因此 Enter 键不会重新打开下拉菜单。