本文详解 angular 模态建议列表（如价格选择）中“首次点击无效、仅第二次生效”的典型问题，指出 `blur` + `settimeout` 导致的竞态冲突，并提供基于事件生命周期控制与防闪烁优化的可靠实现方案。
在 Angular 表单中实现“聚焦显示建议 → 点击选择 → 自动关闭”的交互时，若直接依赖 focus/blur 事件配合 setTimeout 控制建议框显隐，极易引发点击失效问题——用户第一次点击建议项无响应，第二次才生效。根本原因在于：*点击建议 <li> 的瞬间，输入框先触发 blur，立即执行 this.priceFocused = false（或延迟后执行），导致 `ngIf="priceFocused"在 DOM 渲染前被移除，绑定的(click)` 事件尚未触发即失效。**
✅ 正确做法：解耦焦点逻辑与点击逻辑
首先，避免在模板中直接赋值（如 (click)="currentInventory.price=price[1]"），应统一交由组件方法处理；其次，必须阻止 blur 对点击操作的干扰。推荐采用以下结构化方案：
<div class="input-field width-100">
<label>Price</label>
<input
autocomplete="off"
type="number"
class="w-100"
value="0.00"
name="price"
(focus)="priceFieldFocus()"
(blur)="priceFieldBlur($event)"
[(ngModel)]="currentInventory.price"
(ngModelChange)="onFieldChange()">
<div class="suggestions suggestions-wider" *ngIf="priceFocused">
<ul>
<ng-container *ngIf="currentInventory.card.tcgplayer.prices != null">
<ng-container *ngFor="let price of formatPriceData()">
<li
class="card-choice"
*ngIf="price != null"
(click)="selectPrice(price)"
(mousedown)="$event.preventDefault()"> <!-- 关键：防止 blur 提前触发 -->
<div class="row">
<div class="col-8">{{ price[0] }}</div>
<div class="col-4">${{ price[1] }}</div>
</div>
</li>
</ng-container>
</ng-container>
</ul>
</div>
</div>对应 TypeScript：
public priceFocused: boolean = false;
priceFieldFocus() {
this.priceFocused = true;
}
priceFieldBlur(event: FocusEvent) {
// 使用 setTimeout 延迟关闭，但需确保点击已捕获
setTimeout(() => {
// 检查焦点是否移至建议列表内部（即用户点了建议项）
const isClickingSuggestion = event.relatedTarget instanceof Element &&
event.relatedTarget.closest('.suggestions');
if (!isClickingSuggestion) {
this.priceFocused = false;
}
}, 150); // 缩短延迟至 150ms，兼顾响应性与稳定性
}
selectPrice(price: [string, number]): void {
this.currentInventory.price = price[1];
this.priceFocused = false; // 立即关闭建议框
}⚠️ 关键注意事项
- mousedown.preventDefault() 是核心防护：在 <li> 上添加 (mousedown)="$event.preventDefault()" 可阻止浏览器默认的焦点转移行为，避免点击瞬间触发输入框 blur，为 Angular 事件队列争取执行时机。
- relatedTarget 辅助判断：blur 事件的 event.relatedTarget 指向获得焦点的新元素。通过 closest('.suggestions') 判断焦点是否落入建议区域，可精准区分「用户点空白处关闭」vs「用户点建议项选择」。
- 延迟时间宜短不宜长：500ms 过长易造成 UI 卡顿感，100–200ms 更符合人机交互直觉。
- 避免 ngModelChange 干扰：确保 onFieldChange() 不会意外重置 priceFocused，否则将覆盖用户主动选择逻辑。
✅ 最终效果
- 输入框聚焦 → 建议列表立即显示；
- 点击任意建议项 → 立即赋值并收起列表（无延迟、无二次点击）；
- 点击输入框外任意区域（非建议区）→ 150ms 后自动收起；
- 全程无 ExpressionChangedAfterItHasBeenCheckedError 等变更检测异常。
此方案兼顾 Angular 生命周期特性与原生 DOM 事件机制，在保持代码清晰性的同时，彻底解决“二次点击才生效”的顽疾。
