Angular ui-select 需要點擊兩次才能進入輸入

Question

我對 angular 還很陌生，我有一個 ui-select，它在鍵入任何內容時從遠程服務中獲取數據，顯示下拉列表中的相關項目。 它是一個單選下拉菜單。 問題是輸入字段需要點擊兩次才能打開。 第一次單擊時，該字段被聚焦，第二次單擊時，光標會出現以供輸入。

無法了解導致問題的原因。

     <ui-select  ng-model="page.model.form.relatedItem"  theme="bootstrap">
          <ui-select-match placeholder="Search ...">
             <span ng-if="$select.selected.name" nbind="$select.selected.name"></span>
             <span ng-if="!$select.selected.name" ng-bind="page.model.form.relatedItem.name"></span>
          </ui-select-match>
         <ui-select-choices refresh="page.getRelatedItemList($select.search)" refresh-delay="0" group-by="'group'"  repeat="item in page.itemArray | filter: $select.search">
           <span ng-bind-html="item.name | highlight: $select.search"></span>
         </ui-select-choices>
    </ui-select>

謝謝你的幫助。

Answer 1

這是 angularJs 的 ui-select 庫的一個已知問題。

該問題與ngAnimate和 ui-select 組件有關。 如果ngAnimate從應用中移除，問題就會消失。 如果刪除ngAnimate不適合您，還有幾種解決方法。

一種解決方法是向 ui-select 元素添加一個prevent-animations指令。 簡化代碼示例如下：

<ui-select prevent-animations>
    <ui-select-match prevent-animations>{{$item.title}}</ui-select-match>
    <ui-select-choices prevent-animations>
    ...
    </ui-select-choices>

另一個建議的解決方法是在組件激活后使用延遲將焦點添加到搜索字段。 盡管引用的 github 問題已標記為已關閉，但仍有其他未解決的問題引用了相同的問題，不幸的是，該項目現在已標記為已存檔，所以不要等待任何修復出現在那里！