安装ember-power-select后ember-bootstrap的BsPopover组件定位异常求助

问题根源 #

ember-power-select 默认会注入全局样式（比如修改body的overflow属性），其内部的下拉渲染逻辑也会干扰 ember-bootstrap popover 的位置计算基准，导致 popover 无法基于触发元素定位，转而以页面根节点为基准渲染在页面开头。

具体解决方案 #

1. 强制popover在触发元素同级渲染 #

修改BsPopover的renderInPlace属性为true，让popover直接渲染在触发元素的DOM同级位置，避开body层级的样式干扰：

<BsPopover @triggerElement={{this.triggerRef}} @renderInPlace={{true}} @title="弹窗标题" as |p|>
  <p.trigger>
    <button type="button" ref={{this.triggerRef}}>点击唤出弹窗</button>
  </p.trigger>
  <p.content>
    弹窗内容示例
  </p.content>
</BsPopover>

注意要通过ref正确绑定触发元素的引用，确保popover能获取到准确的定位基准。

2. 重置ember-power-select的全局样式 #

在项目全局样式文件（如app/styles/app.css）中，覆盖power-select对body的样式修改：

/* 避免power-select打开下拉时修改body滚动样式，干扰popover定位 */
body.ps-open {
  overflow: unset !important;
}

3. 手动自定义popover定位逻辑 #

如果前两种方法无效，可手动计算并设置popover的位置。在组件中添加定位调整逻辑：

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class TriggerPopoverComponent extends Component {
  @tracked popoverEl;

  @action
  adjustPosition() {
    const triggerRect = this.args.triggerEl.getBoundingClientRect();
    if (this.popoverEl) {
      this.popoverEl.style.position = 'fixed';
      this.popoverEl.style.left = `${triggerRect.left}px`;
      this.popoverEl.style.top = `${triggerRect.bottom + 8}px`;
    }
  }
}

然后在模板中绑定元素引用并触发调整：

<BsPopover @triggerElement={{this.triggerEl}} as |p|>
  <p.trigger>
    <button type="button" ref={{this.triggerEl}}>点击显示弹窗</button>
  </p.trigger>
  <p.content ref={{this.popoverEl}} {{did-insert this.adjustPosition}}>
    自定义定位的弹窗内容
  </p.content>
</BsPopover>

4. 调整版本匹配 #

尝试降级ember-power-select到5.x系列，或升级ember-bootstrap至更适配的版本，部分版本冲突会导致这类样式定位问题。

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