Angular中从Bootstrap抽屉打开Modal后无法编辑输入框问题

问题描述 #

开发Angular项目时，点击普通按钮打开Modal功能正常，但从Bootstrap抽屉（Offcanvas）内的按钮打开Modal后，Modal中的文本输入框无法编辑。尝试过常见解决方案但无效。

核心原因 #

Offcanvas未关闭时，其背景遮罩或元素层级会覆盖在Modal之上，导致输入框无法获取焦点。即使Bootstrap Offcanvas默认z-index（1045）低于ng-bootstrap Modal的默认z-index（1055），也可能因DOM渲染时机或焦点捕获逻辑，导致Modal输入框无法正常交互。

解决方案 #

方案一：打开Modal时自动关闭Offcanvas #

从用户体验角度，打开Modal时关闭侧边抽屉更合理，同时解决焦点冲突问题。

步骤1：给Offcanvas添加模板引用变量

修改抽屉模板，添加#myDrawer引用：

<!-- 侧边抽屉 -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="myDrawer" #myDrawer aria-labelledby="myDrawerLabel">
    <!-- 抽屉原有内容保持不变 -->
</div>

步骤2：在组件中控制Offcanvas关闭

在TS文件中引入Bootstrap Offcanvas实例，调用关闭方法：

import { ViewChild, ElementRef, OnInit } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { FormBuilder, FormGroup } from '@angular/forms';
import Offcanvas from 'bootstrap/js/dist/offcanvas';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  @ViewChild('myDrawer') myDrawer!: ElementRef;
  formCliente!: FormGroup;

  constructor(
    private modal: NgbModal,
    private formBuilder: FormBuilder
  ) {}

  ngOnInit(): void {
    this.formCliente = this.formBuilder.group({
      nombre: '',
      apodo: '',
    });
  }

  openModal(param: any) {
    // 获取Offcanvas实例并关闭
    const offcanvasInstance = Offcanvas.getInstance(this.myDrawer.nativeElement);
    offcanvasInstance?.hide();
    
    // 打开Modal
    this.modal.open(param, { centered: true });
  }
}

方案二：强制调整层级（z-index） #

若需保持Offcanvas打开，可通过CSS强制提升Modal的层级，确保其覆盖在Offcanvas之上：

在全局样式文件（styles.css/styles.scss）中添加：

/* 提升Modal及背景遮罩的层级 */
.modal-backdrop {
  z-index: 1060 !important;
}
.modal {
  z-index: 1065 !important;
}

/* 可选：降低Offcanvas及背景遮罩的层级 */
.offcanvas-backdrop {
  z-index: 1030 !important;
}
.offcanvas {
  z-index: 1035 !important;
}

方案三：手动转移焦点到Modal #

通过监听Modal打开事件，手动将焦点设置到Modal内的输入框，绕过Offcanvas的焦点捕获：

修改TS中的openModal方法：

openModal(param: any) {
  const modalRef = this.modal.open(param, { centered: true });
  
  // Modal完全打开后，将焦点设置到第一个输入框
  modalRef.shown.subscribe(() => {
    const firstInput = document.getElementById('nombre');
    firstInput?.focus();
  });
}

总结 #

优先选择方案一，既解决技术问题又优化用户体验；若业务需求需保持Offcanvas打开，再使用方案二或三。

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