Wrong behaviour in the popup window

[posel]

Describe the bug

Calendar does not work correctly, when open in popup window

• doesn't work destroy
• doesn't work correctly with mouse
• doesn't work events clickSchedule, beforeUpdateSchedule The principal problem is, that the component mistakenly works with global Window instead of taking window object from the placement element. If it take the correct window element, I believe, it will be OK

The same code, when open in main window (when placement is in the main window) works good.

To Reproduce

Events Steps to reproduce the behavior:

1. Open the calendar in the popup window

2. set up on events: this.calendar.on({ 'beforeCreateSchedule': (schedule: ISchedule) => { this.addSchedule(schedule.start.toString(), schedule.end.toString()) }, 'clickSchedule': (eventObj: IEventScheduleObject) => { this.openShedule(eventObj.schedule) }, 'beforeUpdateSchedule' : (event: IEventObject) => { // userMessage.warn('before update',false,this.myWindow) this.openShedule(event.schedule) }, 'clickDayname': (event: IEventDateObject) => { if (this.calendar.getViewName() === 'week') { this.calendar.setDate(new Date(event.date)) this.calendar.changeView('day', true) } }

3. Event beforeCreateSchedule works (really, this one yes) but the others not

4. when using mouse outside the window, it scrolls the calendar, because it catches event from the main window

Destroy: When popUp window closes, it calls this.calendar.destroy() this.calendar = undefined and close and forget itself. But then calendars raises exception again and again because it misses containers. The destroy somehow destroys internal data structures but the code that is linked to the main window object remains active event when placement with calendar and the whole window is out.

Expected behavior

Work everywhere with window where is the placement placement..ownerDocument.defaultView

Screenshots

Desktop (please complete the following information):

• all environments (Firefox, Chrome)

Smartphone (please complete the following information):

• Windows, but the problem should be everywhere
• Version: OS: latest, Browser: latest, TUI Calendar: latest

[jungeun-cho]

@posel Please give me a codepen, codesandbox or jsfiddle link to reproduce your problem.

[SebL68]

I had the same issue with mobile devices, it append when calendar is down the viewport. To fixe it (ok not the best way, but it work) :

CSS ; .toastui-calendar-popup-overlay{ position: fixed !important; /* the problem is that initialy it was absolute and thus not always in the viewport */ }

JS : // tui calendar don't use touch event, then we simulate it : // When calendar next or preview : setTimeout(() => { // Wait all is created document.querySelectorAll(".toastui-calendar-weekday-event-title").forEach(e=>{ e.addEventListener("touchstart", function(){ const theEvent = document.createEvent("MouseEvent"); theEvent.initMouseEvent("mousedown", true, true); this.dispatchEvent(theEvent); }) }) }, 1);