角度 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 元素。简化的代码示例如下：

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

另一个建议的解决方法是在组件激活后使用延迟将焦点添加到搜索字段。尽管引用的 github 问题已被标记为已关闭，但还有其他未解决的问题引用了相同的问题，不幸的是，该项目现在被标记为已存档，所以不要等待任何修复出现在那里！