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

【问题标题】：Input loses focus when filtering an array, rendered using *ngFor and Clarity's Angular components过滤数组时输入失去焦点，使用 *ngFor 和 Clarity 的 Angular 组件呈现
【发布时间】：2022-01-06 09:43:50
【问题描述】：

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

但是，当用户开始输入以进行过滤时，一旦列表开始向下过滤，输入字段就会失去焦点。在 stackoverflow 上的几个不同帖子（1、2、3）之后，我在*ngFor 中使用了trackBy function，以允许 Angular 唯一标识项目并根据需要执行 DOM 更新。

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

Here is a link to a reproducible scenario in stackblitz.那里也描述了问题描述和重现步骤。

【问题讨论】：

标签： angular ngfor vmware-clarity

【解决方案1】：

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

这是一个带有工作代码的链接 - https://stackblitz.com/edit/clarity-dark-theme-v5-cat3jm?devtoolsheight=33&file=src%2Fapp%2Fapp.component.html

【讨论】：

感谢您试用 Suneet。删除clrDropdownItem 确实解决了失去焦点的问题，但现在，单击用户不再关闭下拉菜单。作为您建议的扩展，使用clrDropdownItem 指令和点击事件将包含用户名和电子邮件的 2 个 div 包装在一个外部 div 中当然可以。 Link to fix。对于未来的读者，这确实需要样式修复并且键盘导航不再起作用。但目前对我来说没关系。