如何禁用nb-select打开nb-option-list时自动选首项并聚焦的功能

云原生阿岚

2026-8-30

nb-select 禁用打开下拉默认首项聚焦/选中的实现方法

推荐方案：使用组件原生属性

nb-select 内置了控制首项聚焦的输入属性 focusFirstOption，该属性默认值为 true，直接将其绑定为 false 即可关闭打开下拉面板时自动聚焦第一个选项的默认逻辑，不会破坏键盘方向键切换选项的正常交互，是侵入性最低的实现方式。
代码示例：

<!-- 绑定focusFirstOption为false即可关闭默认首项聚焦 -->
<nb-select placeholder="请选择选项" [focusFirstOption]="false">
  <nb-option *ngFor="let opt of optionList" [value]="opt.value">
    {{ opt.label }}
  </nb-option>
</nb-select>

低版本兼容方案

如果你使用的Nebular版本较低，没有提供focusFirstOption配置，可以通过监听下拉打开事件，在面板渲染完成后手动清除激活项实现需求：

首先在模板上绑定下拉打开事件

<nb-select placeholder="请选择选项" (open)="handleSelectOpen()">
  <nb-option *ngFor="let opt of optionList" [value]="opt.value">
    {{ opt.label }}
  </nb-option>
</nb-select>

在组件逻辑中获取nb-select实例，打开面板后清除默认激活的选项

import { Component, ViewChild } from '@angular/core';
import { NbSelectComponent } from '@nebular/theme';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  @ViewChild(NbSelectComponent) selectInstance: NbSelectComponent;
  optionList = []; // 替换为实际的选项数据

  handleSelectOpen() {
    // 延后执行等待下拉面板完成渲染
    setTimeout(() => {
      const optionList = this.selectInstance?.optionList;
      if (optionList?.activeItem) {
        optionList.activeItem = null;
      }
    }, 0);
  }
}