Rails中Bootstrap模态框返回路由时自动弹出问题求助

问题根源 #

Turbo Drive的恢复访问缓存机制会保存你访问过的页面状态。当你关闭模态框后，remote_modal turbo frame里仍保留着模态框的HTML代码；返回/documents路由时，Turbo会从缓存恢复页面，此时bs-modal控制器重新触发connect方法，执行this.modal.show()，导致模态框自动弹出。

解决方案 #

需要在模态框关闭后清空remote_modal的内容，同时处理Turbo的页面缓存事件，确保缓存页面中无模态框代码。

1. 修改bs_modal_controller.js，监听模态框关闭事件并清空容器 #

import { Controller } from '@hotwired/stimulus';
import { Turbo } from '@hotwired/turbo-rails';

// Connects to data-controller="bs-modal"
export default class extends Controller {
  connect() {
    this.modal = new bootstrap.Modal(this.element);
    this.modal.show();
    // 绑定模态框关闭事件
    this.element.addEventListener('hidden.bs.modal', this.handleModalHidden.bind(this));
  }

  disconnect() {
    if (this.modal) {
      this.modal.hide();
    }
    // 移除事件监听避免内存泄漏
    this.element.removeEventListener('hidden.bs.modal', this.handleModalHidden.bind(this));
  }

  submitForm(event) {
    this.modal.hide();
  }

  hideBeforeRender(event) {
    if (this.isOpen()) {
      event.preventDefault();
      this.element.addEventListener('hidden.bs.modal', event.detail.resume);
      this.modal.hide();
    }
  }

  isOpen() {
    return this.element.classList.contains('show');
  }

  // 模态框完全关闭后，清空remote_modal容器
  handleModalHidden() {
    Turbo.renderStreamMessage(`<turbo_stream action="replace" target="remote_modal"><template></template></turbo_stream>`);
  }
}

2. 增加Turbo缓存前的清理逻辑（可选，增强稳定性） #

在application.js中添加代码，确保Turbo缓存页面时清空模态框容器：

document.addEventListener('turbo:before-cache', () => {
  const remoteModal = document.getElementById('remote_modal');
  if (remoteModal) remoteModal.innerHTML = '';
});

验证流程 #

1. 访问/documents，打开并关闭模态框
2. 跳转到其他路由，再返回/documents
3. 模态框不会自动弹出

内容的提问来源于stack exchange，提问作者dio-1994