textArea触发onFocus时Button ClickEvent未触发，如何实现聚焦触发按钮点击

问题根因 #

• textArea 触发 focus 事件时同步执行的最大化样式重绘操作，会阻塞同步触发的按钮点击事件队列，导致点击事件没有被正确派发
• 如果直接通过原生DOM API获取按钮元素调用click()方法，未适配Angular的变化检测机制，也可能出现绑定的事件处理逻辑未被Angular捕获执行的情况

解决方案 #

方案1：异步延迟触发按钮点击事件 #

在textArea的focus事件处理函数中，通过setTimeout将按钮点击触发逻辑放到宏任务队列，等待样式重绘完成后再执行，示例代码如下：

// 组件TS文件
import { Component, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 绑定模板中的目标按钮
  @ViewChild('targetBtn') targetBtn: ElementRef<HTMLButtonElement>;

  onTextareaFocus() {
    // 延迟执行，等待textarea最大化样式渲染完成
    setTimeout(() => {
      this.targetBtn.nativeElement.click();
    }, 100);
  }

  // 按钮原有点击处理逻辑
  handleBtnClick() {
    console.log('按钮点击事件已触发');
    // 此处添加原有业务逻辑
  }
}

对应模板代码：

<!-- 组件HTML文件 -->
<textarea 
  (focus)="onTextareaFocus()"
  class="自定义textarea样式类"
></textarea>

<button 
  #targetBtn 
  (click)="handleBtnClick()"
>
  目标按钮
</button>

方案2：抽离公共逻辑（更推荐） #

不需要绕层触发按钮点击事件，直接把按钮点击对应的业务逻辑抽为独立公共方法，focus事件中直接调用该方法即可，从根源避免事件被样式渲染阻塞：

// 组件TS文件
onTextareaFocus() {
  // 直接调用公共业务逻辑
  this.handleBtnClick();
}

handleBtnClick() {
  // 公共业务逻辑
  console.log('执行业务逻辑');
}

样式适配优化 #

如果textarea最大化使用了CSS transition动画，可以监听transitionend事件，等动画完全结束后再执行业务逻辑，避免动画过程中出现界面异常：

onTextareaFocus() {
  const textareaEl = document.querySelector('.自定义textarea样式类') as HTMLElement;
  const onTransitionEnd = () => {
    this.handleBtnClick();
    textareaEl.removeEventListener('transitionend', onTransitionEnd);
  };
  textareaEl.addEventListener('transitionend', onTransitionEnd);
}

内容的提问来源于stack exchange，提问作者Hamed Boumaiza