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

这是一个 known issue使用 angularJs 的 ui-select 库。

问题与 ngAnimate 和 ui-select 组件有关。如果从应用程序中删除 ngAnimate，问题就会消失。如果删除 ngAnimate 不适合您，还有一些解决方法。

一种解决方法是添加 prevent-animations对 ui-select 元素的指令。 简化的代码示例如下:

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

另一个建议的解决方法是 use a delay to add focus组件激活后到搜索字段。尽管引用的 github 问题已标记为已关闭，但还有其他 Unresolved 问题引用 same problem ，不幸的是，这个项目现在被标记为已存档，所以不要等待任何修复出现在那里!