Our pure JavaScript Scheduler component


Post by sterh »

Hi,

I have a extended scheduler menu with custom item that adds note:

	scheduleMenuFeature: {
		items: {
			addEvent: {
				text: 'New activity',
			},
			extraItem: {
				text: 'New note',
				label: 'note',
				icon: 'b-icon b-menuitem-icon b-icon-add',
			},
		},
	},

So I have two menu items: "Add event" and "Add note". When I click on 'Add event', I open default Editor, but when I click on 'Add note', I open custom editor.

I have settings for editor to close it when I click outside the editor:

	const editor = WidgetHelper.openPopup(eventElement, {
		closeAction: 'destroy',
		closable: true,

The bug:

If I click on 'Add note' quickly in different places, after a while, click is stopping to close the Editor and the Editor is still here and new Editor is appearing on the Scheduler. I found the same behaviour in your example:
https://bryntum.com/products/scheduler/examples/eventmenu/

When I press right click on mouse, at first it close Editor and then open menu (the sequences of actions are important). But after some time it starts to show menu while Editor is also here, so Editor is not destroyed, when menu is displayed. It is not a problem in your example because you have only one Editor, but in my project it breaks the closing the one Editor while another is also displayed. After that any click outside the Editor is not closing the broken Editor.

I created video with your example to display what I mean, that the sequences of action is changing.

I will be thankful for any suggestion or help in this issue.


Post by sterh »

The video file:

Screen Recording 2023-02-03 at 16.17.29.mov
(14.04 MiB) Downloaded 24 times

Post by marcio »

Hey sterh,

I saw the video and got your question, but we would need a demo or something with your configuration, as you're using a custom editor, and from that, we can assist you a lot better on this.

Check the guidelines here https://www.bryntum.com/forum/viewtopic.php?f=1&t=772

Best regards,
Márcio


Post by sterh »

I think you can see the bug on the video.
Can not give you a full example, but our application is very simple and does not have any complicated parts.

The config file:

const schedulerConfig: BryntumSchedulerProps = {
	infiniteScroll: true,
	eventResizeFeature: false,
	headerMenuFeature: false,
	cellMenuFeature: false,
	scheduleMenuFeature: {
		items: {
			addEvent: {
				text: 'New event',
			},
			extraItem: {
				text: 'New note',
				label: 'note',
				icon: 'b-icon b-menuitem-icon b-icon-add',
				onItem: newNoteEditorShow
			},
		},
	},
	eventDragCreateFeature: false,
	project: {
		timeRangeStore: new CustomTimeRangeStore(),
	},
	timeRangesFeature: {
		showCurrentTimeLine: true,
	},
};

Here I add extra item for Note. The most interesting here is the function "newNoteEditorShow".

For custom Editor I use your default Editor:

export const eventEditorShow = ({ eventElement, eventRecord, ... }) => {
	const editor: any = WidgetHelper.openPopup(eventElement, {
		closeAction: 'destroy',
		name: 'event',
		closable: true,
		header: 'Add event',
		width: '28em',
		items: {
			description: {
				...
			},
			container: {
				...
			},
			save: {
				...
			},
			close: {
				type: 'button',
				text: 'Cancel',
				minWidth: 100,
				onClick: () => {
					editor.close();
				},
			},
		},
	});
};

I use almost the same structure but with another fields and name for NoteEditor.

"newNoteEditorShow" function is here:

	const newNoteEditorShow = async (data: any) => {
		const scheduler = schedulerRef.current?.instance as Scheduler;
		// here I just create record from data
		const record = createNewNote(data);
		const recordList = await scheduler?.eventStore.addAsync(record);

	noteEditorShow({
		eventElement: document.querySelector(`[data-event-id='${record.id}']`),
		eventRecord: recordList[0],
		...
	});
};

I need to create record on the Scheduler and then display the popup near it. For the usual event the Scheduler does it for me, but here I need to do it myself. The adding a new record in the record list is async function, I can not use synchronously because it have some delay or animation and only after it will be put to the Scheduler and will have some coordinates, I can stick popup to it.

Of cause it leads to some extra work on my side: I need to remove event from Scheduler if user clicks on Cancel or outside the popup. That is why I need to be sure that popup is closed by clicking outside. Otherwise it will be on the Scheduler while menu is open and another popup will be displayed. It is what you see on video.


Post by alex.l »

I reproduced the issue on our example, thank you for your report. Here is a link to track the status of the ticket: https://github.com/bryntum/support/issues/6117

For now, you could check if any of editors are opened before open another one, and close/destroy it.

All the best,
Alex


Post by sterh »

Thank you for creating a ticket for this.

Unfortunately, I can not close/destroy editor correctly, because the process of creating is async. When I try to close it in 'processItems' function, the editor is not created at this moment, because I click quickly on the scheduler. I found another place - before opening the new popup, inside my 'newNoteEditorShow' function, but it is too close to opening a new popup, here I destroy it and then create new one, but new editor is displayed on the same position as previous editor, not in a new place. Maybe because the editor destroying with removing the Event from EventList take some time (I don't know) and not all links are clearing. And I can not influence on this flow because I see that only 'eventStore.addAsync' is async but 'eventRecord.remove' is not and I can not catch the moment when event was completely removed from Scheduler.

Anyway I hope after your fix it will work.


Post Reply