SyncFusion: How to add additional MultiSelectComponent Field to the default editor window

Question

I'm working on integrating a MultiSelectComponent from Syncfusion into the ScheduleComponent editor window. However, I encounter an error when clicking the input field.

Uncaught TypeError: Cannot read properties of undefined (reading 'enqueueForceUpdate')
    at Component.forceUpdate (react.development.js:368:16)
    at ComponentBase.renderReactTemplates (component-base.js:473:18)
    at Observer.eval (multi-select.js:281:23)
    at Observer.notify (observer.js:92:32)
    at ComponentBase.trigger (component-base.js:266:36)
    at MultiSelect.onPopupShown (multi-select.js:268:14)
    at Observer.eval (multi-select.js:5122:23)
    at Observer.notify (observer.js:92:32)
    at ComponentBase.trigger (component-base.js:266:36)
    at MultiSelect.showPopup (multi-select.js:5102:14)
    at MultiSelect.wrapperClick (multi-select.js:1099:22)

Here’s the relevant part of my component:

"use client";

import * as React from "react";
import {
  ScheduleComponent,
  ViewsDirective,
  ViewDirective,
  Week,
  Month,
  Inject,
} from "@syncfusion/ej2-react-schedule";
import { MultiSelectComponent } from "@syncfusion/ej2-react-dropdowns";
import { createElement } from "@syncfusion/ej2-base";

const Calendar = () => {
  const [eventData, setEventData] = React.useState([]);

  const onPopupOpen = (args) => {
    if (args.type === "Editor") {
      if (!args.element.querySelector(".custom-field-row")) {
        let row = createElement("div", { className: "custom-field-row" });
        let formElement = args.element.querySelector(".e-schedule-form");
        formElement.firstChild.insertBefore(
          row,
          formElement.firstChild.firstChild
        );

        let container = createElement("div", {
          className: "custom-field-container",
        });
        let inputEle = createElement("input", {
          className: "e-field",
          attrs: { name: "Members" },
        });
        container.appendChild(inputEle);
        row.appendChild(container);

        new MultiSelectComponent({
          dataSource: [
            {
              id: 1,
              text: "John Doe",
              email: "[email protected]",
            },
            {
              id: 2,
              text: "Jane Smith",
              email: "[email protected]",
            },
            {
              id: 3,
              text: "Alice Johnson",
              email: "[email protected]",
            },
          ],
          fields: { text: "text", value: "id" },
          placeholder: "Select Members",
          mode: "Box",
          showDropDownIcon: true,
          allowFiltering: true,
        }).appendTo(inputEle);
      }
    }
  };

  const onActionBegin = (args) => {
    if (args.requestType === "eventCreate") {
      console.log("New appointment created:", args.data);
      setEventData([...eventData, ...args.data]);
    }
    if (args.requestType === "eventChange") {
      console.log("Appointment updated:", args.data);
      setEventData(
        eventData.map((event) =>
          event.Id === args.data.Id ? args.data : event
        )
      );
    }
    if (args.requestType === "eventRemove") {
      console.log("Appointment removed:", args.data);
      setEventData(eventData.filter((event) => event.Id !== args.data[0].Id));
    }
  };

  return (
    <div className="mt-10">
      <ScheduleComponent
        height="800px"
        eventSettings={{
          dataSource: eventData,
          allowMultiDrag: false,
        }}
        actionBegin={onActionBegin}
        popupOpen={onPopupOpen}
        allowMultiRowSelection={false}
        allowMultiCellSelection={false}
      >
        <ViewsDirective>
          <ViewDirective option="Week" />
          <ViewDirective option="Month" />
        </ViewsDirective>
        <Inject services={[Week, Month]} />
      </ScheduleComponent>
    </div>
  );
};

export default Calendar;

What I've Tried

• Ensured MultiSelectComponent initialization happens within the onPopupOpen function.
• Double-checked the dependencies and their versions.
• Attempted to initialize the MultiSelectComponent in different ways (e.g., using useRef).

Issue

Despite these attempts, I still get the same TypeError related to enqueueForceUpdate.

LInk to test the issue https://stackblitz.com/edit/syncfusion-multi-select-issue-2-vreevz?file=index.js

Note: It looks good with simple dropdownlist component

https://stackblitz.com/edit/syncfusion-multi-select-issue-2-fdbvcc?file=index.js

Any help or insight into what might be going wrong would be greatly appreciated!

Answer 1

It turned out I was importing the component wrongly.
I had to import MultiSelect instead of MultiSelectComponent

Answer 2

Using the MultiSelectComponent in the schedule popup open event causes the issue. Therefore, you should use MultiSelect instead of MultiSelectComponent.