过滤数组时输入失去焦点，使用 *ngFor 和 Clarity 的 Angular 组件呈现

Input loses focus when filtering an array, rendered using *ngFor and Clarity's Angular components

我有一个使用 *ngFor 呈现的用户列表。用户可以选择通过在输入字段中键入名称来过滤列表。

但是，当用户开始键入以进行过滤时，一旦列表开始向下过滤，输入字段就会失去焦点。在 Whosebug 上关注几个不同的帖子（*ngFor 中的 , , 3), I have used trackBy function 允许 Angular 唯一标识项目并根据需要执行 DOM 更新。

Angular 文档描述了 trackBy 函数对于“保留任何 DOM-特定的 UI 状态（如光标位置、焦点，文本选择）当可迭代对象被修改时”。但在我的例子中，当数组被修改时，这种 UI 的焦点状态就会丢失。

trackBy 完全没问题，而问题是 clrDropdownItem 指令应用于 <li>，这不是必需的。一旦更新列表，该指令就会自动获得第一个元素的焦点。我刚刚删除了它，现在您的代码可以正常工作了。