Angular自定义下拉组件无法用鼠标选中输入框文字问题

无法鼠标选中输入框文本的核心原因，是你实现「阻止下拉面板自动聚焦、保持输入框聚焦」的逻辑存在缺陷：你在全局/下拉容器的mousedown事件回调中无差别调用了event.preventDefault()，同时在事件捕获阶段就强制触发输入框聚焦，直接拦截了浏览器原生的文本选择行为——浏览器触发鼠标拖选输入框文本的前提，就是mousedown事件的默认行为不被阻断，拦截后自然无法完成选中文本的操作。

• 移除无差别的默认事件拦截：给mousedown回调增加事件源判断，如果鼠标点击的目标是搜索输入框本身、或输入框内部的子节点，直接跳过拦截逻辑，不执行preventDefault()，放行浏览器原生的文本选择动作
• 调整焦点保持逻辑的执行时机：针对点击下拉面板选项的场景，不要在mousedown事件的同步执行阶段立刻触发输入框聚焦，把聚焦逻辑放到setTimeout(() => this.searchInput.focus(), 0)的异步队列中，等浏览器原生的选择、点击行为执行完成后再触发焦点回退，完全避免打断文本选择
• 优先使用组件库原生配置替代自定义焦点拦截：如果是基于Angular CDK Overlay实现下拉面板，直接在浮层配置项中设置autoFocus: false、restoreFocus: false即可实现浮层弹出时不抢输入框焦点，不需要额外手写全局事件监听，从根源上避免事件冲突

import { Component, ViewChild, ElementRef, HostListener } from '@angular/core';

@Component({
  selector: 'app-custom-dropdown',
  template: `
    <div class="dropdown-container">
      <input #searchInput type="text" class="search-input">
      <div #dropdownPanel class="options-panel" *ngIf="isOpen">
        <!-- 下拉选项内容 -->
      </div>
    </div>
  `
})
export class CustomDropdownComponent {
  @ViewChild('searchInput') searchInput!: ElementRef<HTMLInputElement>;
  @ViewChild('dropdownPanel') dropdownPanel!: ElementRef<HTMLElement>;
  isOpen = false;

  @HostListener('document:mousedown', ['$event'])
  handleMouseDown(e: MouseEvent) {
    const target = e.target as HTMLElement;
    // 点击输入框内部直接放行，不拦截任何默认行为
    if (this.searchInput.nativeElement.contains(target)) {
      return;
    }
    // 点击下拉面板区域时，延迟触发焦点保持，不打断原生行为
    if (this.dropdownPanel.nativeElement.contains(target)) {
      setTimeout(() => this.searchInput.nativeElement.focus());
      return;
    }
    // 点击组件外部时关闭下拉
    this.isOpen = false;
  }
}

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