Angular集成Syncfusion后新增事件无法编辑文本框求助

问题场景 #

在Angular应用中使用Syncfusion日程组件，手动添加单选DropDownList后出现以下异常：

• 创建事件打开编辑器后，文本字段无法点击编辑，必须先点击手动添加的下拉框才能激活文本编辑
• 日期选择器、颜色选择器等非文本控件可正常操作
• 可通过Tab键定位到文本字段并编辑，保存功能正常
• 以相同方式添加的多选下拉框无此问题

手动添加单选下拉框的代码如下：

// Driller
let drillerElement: HTMLInputElement = args.element.querySelector(
  "#drillerInput"
) as HTMLInputElement;

if (!drillerElement.classList.contains("e-dropdown")) {
  this.drillerDropdown = new DropDownList({
    placeholder: "Choose driller",
    value: eventData.UserResponsibleID,
    dataSource: this.peopleResources,
    fields: { text: "ResourceName", value: "UserID" },
    floatLabelType: "Auto",
  });

  this.drillerDropdown.query = this.getQueryForResources(
    this.getListOfAvailablePeople(
      eventData["StartTime"],
      eventData["EndTime"],
      eventData
    )
  );

  this.drillerDropdown.dataBind();
  this.drillerDropdown.appendTo(drillerElement);
  drillerElement.setAttribute("name", "UserResponsibleID");

  // Handle the change event to update the UserResponsibleID
  this.drillerDropdown.change = (args) => {
    eventData.UserResponsibleID = this.drillerDropdown.value as number;
  };
}

可能的解决方案 #

1. 延迟初始化下拉框，确保编辑器完全渲染 #

编辑器打开时DOM可能未完全加载完成，直接初始化下拉框会干扰编辑器的焦点管理逻辑。通过延迟执行初始化代码规避：

setTimeout(() => {
  let drillerElement: HTMLInputElement = args.element.querySelector("#drillerInput") as HTMLInputElement;
  if (!drillerElement.classList.contains("e-dropdown")) {
    this.drillerDropdown = new DropDownList({
      placeholder: "Choose driller",
      value: eventData.UserResponsibleID,
      dataSource: this.peopleResources,
      fields: { text: "ResourceName", value: "UserID" },
      floatLabelType: "Auto",
    });

    this.drillerDropdown.query = this.getQueryForResources(
      this.getListOfAvailablePeople(
        eventData["StartTime"],
        eventData["EndTime"],
        eventData
      )
    );

    this.drillerDropdown.dataBind();
    this.drillerDropdown.appendTo(drillerElement);
    drillerElement.setAttribute("name", "UserResponsibleID");

    this.drillerDropdown.change = (args) => {
      eventData.UserResponsibleID = this.drillerDropdown.value as number;
    };
  }
}, 100); // 可根据实际渲染速度调整延迟时间

2. 禁止下拉框事件阻止冒泡 #

单选DropDownList的内部事件可能阻止了编辑器的点击事件冒泡，导致文本字段无法响应点击。在下拉框配置中允许事件冒泡：

this.drillerDropdown = new DropDownList({
  placeholder: "Choose driller",
  value: eventData.UserResponsibleID,
  dataSource: this.peopleResources,
  fields: { text: "ResourceName", value: "UserID" },
  floatLabelType: "Auto",
  // 添加事件冒泡允许配置
  open: (e) => {
    e.event.stopPropagation = false;
  },
  close: (e) => {
    e.event.stopPropagation = false;
  },
  change: (e) => {
    e.event.stopPropagation = false;
    eventData.UserResponsibleID = this.drillerDropdown.value as number;
  }
});

3. 使用Syncfusion官方模板方式添加自定义控件 #

手动DOM操作可能破坏编辑器内部的DOM结构和事件绑定，改用官方推荐的editorTemplate方式自定义编辑器：

// 初始化日程组件时配置编辑器模板
this.scheduleObj = new Schedule({
  // 其他核心配置...
  editorTemplate: (data) => {
    // 返回包含自定义字段的编辑器模板
    return `
      <div class="e-schedule-editor-form">
        <!-- 自定义Driller字段 -->
        <div class="e-field">
          <label class="e-label" for="drillerInput">Driller</label>
          <input id="drillerInput" type="text" class="e-input" />
        </div>
        <!-- 保留默认字段 -->
        <div class="e-field">
          <label class="e-label" for="Subject">Subject</label>
          <input id="Subject" type="text" class="e-input" name="Subject" />
        </div>
        <!-- 其他默认字段... -->
      </div>
    `;
  },
  actionBegin: (args) => {
    if (args.requestType === "openEditor") {
      // 在编辑器打开后初始化下拉框
      setTimeout(() => {
        const eventData = args.data;
        let drillerElement: HTMLInputElement = args.element.querySelector("#drillerInput") as HTMLInputElement;
        if (!drillerElement.classList.contains("e-dropdown")) {
          this.drillerDropdown = new DropDownList({
            placeholder: "Choose driller",
            value: eventData.UserResponsibleID,
            dataSource: this.peopleResources,
            fields: { text: "ResourceName", value: "UserID" },
            floatLabelType: "Auto",
          });

          this.drillerDropdown.query = this.getQueryForResources(
            this.getListOfAvailablePeople(
              eventData["StartTime"],
              eventData["EndTime"],
              eventData
            )
          );

          this.drillerDropdown.dataBind();
          this.drillerDropdown.appendTo(drillerElement);
          drillerElement.setAttribute("name", "UserResponsibleID");

          this.drillerDropdown.change = (args) => {
            eventData.UserResponsibleID = this.drillerDropdown.value as number;
          };
        }
      }, 0);
    }
  }
});

4. 手动刷新编辑器焦点状态 #

在下拉框初始化完成后，强制刷新编辑器的焦点管理，确保文本字段可点击：

// 在下拉框appendTo之后添加以下代码
const titleInput = args.element.querySelector(".e-subject"); // 替换为你的文本字段选择器
if (titleInput) {
  titleInput.style.pointerEvents = "auto";
  titleInput.setAttribute("tabindex", "0");
  // 若编辑器实例可获取，调用refresh方法
  const editorInstance = args.editor;
  if (editorInstance && typeof editorInstance.refresh === "function") {
    editorInstance.refresh();
  }
}

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