如何捕获嵌套布局中Webix ui.text的resize以同步调整ui.popup宽度

在Webix里，用ui.popup作为ui.text的下拉建议列表时，响应式场景下常会遇到嵌套布局中文本框宽度变化后，popup宽度无法同步的问题——简单布局里监听ui.text的onViewResize事件就能同步尺寸，但嵌套布局里文本框随父布局resize时，不会触发这个事件，导致popup宽度跟不上。

问题根源 #

onViewResize事件仅在组件自身被直接调整尺寸时触发，父布局resize带动子组件尺寸变化的场景下，子组件的onViewResize不会被触发，这就是嵌套布局里同步失效的核心原因。

可行解决方案 #

方案1：在popup显示时动态同步宽度

无需依赖resize事件，直接在popup即将显示时，获取文本框的当前宽度并设置给popup：

// 给嵌套布局里的文本框绑定onPopup事件
$$("nestedText").attachEvent("onPopup", function(popup) {
  // 获取文本框当前宽度，同步给popup
  popup.setWidth(this.getWidth());
});

或者在popup的onShow事件中处理：

webix.ui({
  view: "popup",
  id: "nestedPopup",
  on: {
    onShow: function() {
      const textComp = $$("nestedText");
      this.setWidth(textComp.getWidth());
    }
  },
  body: { /* 下拉建议内容 */ }
});

方案2：用ResizeObserver监听DOM尺寸变化

通过原生的ResizeObserver监听文本框DOM元素的尺寸变化，不管尺寸变化是来自父布局resize还是自身调整，都能实时同步popup宽度：

const textDom = $$("nestedText").$view;
const resizeObserver = new ResizeObserver(() => {
  const popup = $$("nestedPopup");
  // 仅在popup显示时同步宽度
  if (popup.isVisible()) {
    popup.setWidth($$("nestedText").getWidth());
  }
});
resizeObserver.observe(textDom);

这两种方案都能避开onViewResize事件的局限性，完美解决嵌套布局中popup与文本框的宽度同步问题。

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