Returning a promise in processItems opens event menu in wrong place with shadowRoot

[taauntik]

Forum Post

Reproducible here scheduler/examples/eventmenu/ with the code below

import stylesheet from 'https://bryntum.com/products/scheduler/build/scheduler.stockholm.css?488814?489033' with { type: 'css' };
import stylesheet2 from 'https://bryntum.com/products/scheduler/examples/_shared/shared.css?489033' with { type: 'css' };

// Object.assign(window, SchedulerModule);

const myContainer = document.createElement("div");
myContainer.id = "container";
myContainer.role = "main";
myContainer.style.setProperty('height', '100%');

var myShadowRoot = myShadow.attachShadow({ mode: "open" });
myShadowRoot.appendChild(myContainer);
myShadowRoot.adoptedStyleSheets = [stylesheet, stylesheet2];

const scheduler = new Scheduler({
    appendTo          : myContainer,
    startDate         : new Date(2019, 0, 1, 6),
    endDate           : new Date(2019, 0, 1, 20),
    viewPreset        : 'hourAndDay',
    rowHeight         : 50,
    barMargin         : 5,
    eventColor        : 'cyan',
    resourceImagePath : 'https://bryntum.com/products/scheduler/examples/_shared/images/users/',

columns : [
    { type : 'resourceInfo', text : 'Name', field : 'name', width : 130 }
],

eventStore : {
    fields : ['done', 'canceled', 'locked']
},

features : {
    eventMenu : {
        items : {
            move : {
                text   : 'Move event',
                icon   : 'b-fa b-fa-fw b-fa-arrows-alt-h',
                cls    : 'b-separator',
                weight : 510,
                menu   : {
                    moveLeft : {
                        text   : 'Move left',
                        icon   : 'b-fa b-fa-fw b-fa-arrow-left',
                        cls    : 'b-separator',
                        weight : 511,
                        onItem({ eventRecord }) {
                            eventRecord.startDate = DateHelper.add(eventRecord.startDate, -1, 'hour');
                        }
                    },
                    moveRight : {
                        text   : 'Move right',
                        icon   : 'b-fa b-fa-fw b-fa-arrow-right',
                        weight : 512,
                        onItem({ eventRecord }) {
                            eventRecord.startDate = DateHelper.add(eventRecord.startDate, 1, 'hour');
                        }
                    }
                }
            },
            split : {
                text   : 'Split',
                icon   : 'b-fa b-fa-fw b-fa-cut',
                weight : 520,
                onItem({ eventRecord }) {
                    eventRecord.split();
                }
            },
            lock : {
                text   : 'Lock',
                icon   : 'b-fa b-fa-fw b-fa-lock',
                cls    : 'b-separator',
                weight : 530,
                onItem({ eventRecord }) {
                    eventRecord.locked = true;
                    eventRecord.draggable = false;
                    eventRecord.resizable = false;
                }
            },
            editEvent : {
                text : 'Update'
            },
            deleteEvent : false
        },

        preventNativeMenu: true,
        processItems: ({ eventRecord, items }) => {
            if (eventRecord.eventType === 'meeting') {
                items.cancel = {
                    text   : 'Cancel',
                    icon   : 'b-fa b-fa-fw b-fa-ban',
                    cls    : 'b-separator',
                    weight : 540,
                    onItem({ eventRecord }) {
                        eventRecord.canceled = true;
                    }
                };
            }
            if (eventRecord.eventType === 'activity') {
                items.editEvent = false;
                items.done = {
                    text   : 'Done',
                    icon   : 'b-fa b-fa-fw b-fa-check',
                    cls    : 'b-separator',
                    weight : 550,
                    onItem({ eventRecord }) {
                        eventRecord.done = true;
                    }
                };
            }
            if (eventRecord.canceled || eventRecord.done) {
                items.lock.disabled = true;
            }
            return new Promise(resolve => {
                setTimeout(() => {
                    items.lock = false;
                    resolve();
                }, 1000);
            });
        }
    }
},
eventRenderer({ eventRecord, renderData }) {
    let status = '';
    if (eventRecord.canceled) {
        renderData.cls.canceled = true;
        renderData.iconCls = 'b-fa b-fa-ban';
        renderData.eventColor = 'gray';
        status = 'Canceled: ';
    }
    else if (eventRecord.done) {
        renderData.cls.done = true;
        renderData.iconCls = 'b-fa b-fa-check';
        renderData.eventColor = 'lime';
        status = 'Done: ';
    }
    else if (eventRecord.locked) {
        renderData.cls.locked = true;
        renderData.iconCls = 'b-fa b-fa-lock';
        renderData.eventColor = 'red';
        status = 'Locked: ';
    }
    else if (eventRecord.eventType === 'activity') {
        renderData.iconCls = 'b-fa b-fa-clock';
    }
    else if (eventRecord.eventType === 'meeting') {
        renderData.iconCls = 'b-fa b-fa-calendar';
    }
    return `${status}${StringHelper.encodeHtml(eventRecord.name)}`;
}
});

scheduler.maskBody('Loading JSON data');

AjaxHelper.get('https://bryntum.com/products/scheduler/examples/eventmenu/data/data.json', { parseJson : true }).then(response => {
    const data = response.parsedJson;
    if (scheduler.isDestroyed) {
        return;
    }
    if (data) {
        scheduler.resources = data.resources;
        scheduler.events = data.events;
    }
    scheduler.unmaskBody();
});