Angular13中输入框按回车时如何避免ng-bootstrap下拉框值变更

• 运行环境：Angular 13 项目，使用官方适配的ng-bootstrap下拉组件
• 异常行为：页面中任意输入框聚焦状态下按下回车键时，下拉框的选中值会被自动修改为第一个选项，属于非预期触发的变更。

模板代码（HTML） #

<div class="row mb-3 mt-3">
  <div class="col">
    <div ngbDropdown class="d-inline-block">
      <button
        type="button"
        class="btn btn-outline-primary"
        id="dropdownBasic1"
        ngbDropdownToggle
      >
        {{ clickMessage }}
      </button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button
          ngbDropdownItem
          class="nav-link"
          href="#"
          (click)="getText($event.target.innerText)"
        >
          Option 1
        </button>
        <button
          ngbDropdownItem
          class="nav-link"
          href="#"
          (click)="getText($event.target.innerText)"
        >
          Option 2
        </button>
        <button
          ngbDropdownItem
          class="nav-link"
          href="#"
          (click)="getText($event.target.innerText)"
        >
          Option 3
        </button>
      </div>
    </div>
  </div>
</div>

逻辑代码（TypeScript） #

clickMessage = 'Choose an option';

getText(text) {
  this.clickMessage = text;
}

浏览器默认规则：未显式声明type属性的<button>元素，会被自动识别为type="submit"的提交按钮。当输入框处于聚焦状态时按下回车键，浏览器会自动查找当前所属表单内的第一个提交按钮，触发其点击事件。
示例代码里的下拉选项全部是未指定type的button元素，第一个选项刚好是表单内识别到的第一个提交按钮，因此回车时会自动触发它的点击绑定逻辑，把下拉显示值修改为Option 1。

任选一种即可解决问题：

• 最优方案：给所有带ngbDropdownItem指令的按钮显式添加type="button"属性，明确告知浏览器这是普通按钮，不属于提交按钮，从根源上避免被回车事件误触发。修改后的下拉项示例：

<button
  ngbDropdownItem
  type="button"
  class="nav-link"
  (click)="getText($event.target.innerText)"
>
  Option 1
</button>

补充：原代码中给button标签添加的href="#"属于无效属性，button元素不需要href配置，建议直接删除，避免点击时触发页面锚点跳转的额外异常。

• 兼容方案：如果当前页面没有原生表单提交需求，可以给所在的<form>标签添加提交事件拦截，阻止默认的回车提交流程：

<form (ngSubmit)="$event.preventDefault()">
  <!-- 页面原有内容，包括输入框、下拉组件 -->
</form>

这个方案会拦截表单下所有默认提交行为，适合本身就用Angular表单做提交控制、不需要原生submit触发的场景。

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