[REACT] SimpleTaskEditFeature in react addNetAtEnd issues

[mlaukkanen]

Hi,
I've found some issues with the SimpleTaskEditFeature config in your "React Basic Example", none of these are reproducible in your JS examples so I guess the issues is in the wrapper.

Issue 1 & 2:
Add the following in the AppConfig.ts file inside the config:

simpleTaskEditFeature: {
	disabled: false
}

After enabling the feature the following issue occurs:

1. Click + to create new item in DOING or DONE column
2. Press enter to create task with default name
   First issue: Task addNewTaskAtEnd does not happen the created task is simply selected.
3. Press enter AGAIN
   Second issue: Multiple new tasks are added! And also often some of the new items are added in the 1st column (TODO)
   (screenshots attached for these 3 steps)

Issue 3:
Disable addNewAtEnd:

simpleTaskEditFeature: {
	disabled: false,
	addNewAtEnd: false
}

This config option is ignored and issues above still happen.

UPDATE: Issue 4?
Enabling keyMap changes also seem to be ignored, at first I thought this fixed my issue but with further testing the keyMap changes do strange things. And not what is expected.

simpleTaskEditFeature: {
	disabled: false,
	keyMap: {
		Enter: 'complete',
		'Ctrl+Enter': 'editNext'
	}
}

I've tried a few variations on those keyMaps but I'm not sure I'm doing it right.

Cheers,
Martin

[tasnim]

Hi,
I've reproduced the bug and here is the ticket: https://github.com/bryntum/support/issues/4550
We will investigate it. And the keyMap seems to work well for me, I didn't face any issues. What version you are using?

Best regards,
Tasnim

[mlaukkanen]

Hi,
Thanks for logging the bug!

With the keyMap I couldn't get it do what I wanted which was specifically:
Enter -> Commit current edit and do nothing else,
Ctrl+Enter -> Commit edit and create new below.

What settings should I use for keyMaps to do that?

I'm running v5.0.3.

Thanks,
Martin

[alex.l]

editNext that you used in a keyMap is doing the same that "Enter" key in default keyMap - it's move focus to the next field in a current task form and if no fields - creates new task record below (if addNewAtEnd enabled).
There is no method for keyMap available to jump from any field and create a new task. Try to implement your own:

simpleTaskEditFeature : {
            keyMap: {
                Enter: 'complete',
                'Ctrl+Enter': 'completeAndAddNew'
            },
            async completeAndAddNew(event) {
                const
                    me                 = this,
                    { client, editor } = me,
                    taskRecord         = editor.record;

            if (await me.complete(event)) {
                const nextTaskRecord = client.getNextTask(taskRecord, false);
                // Edit next card
                if (nextTaskRecord) {
                    me.editTask(nextTaskRecord);
                }
                // Or add a new card
                else {
                    client.addTask(client.getColumn(taskRecord), client.getSwimlane(taskRecord));
                }
            }
        }

    }

[johan.isaksson]

Hi,

I am assigned on the issue that tasnim opened. Currently checking "Issue 1", but it seems to be working as expected to me. I add a new task, type a name and hit [Enter]. It then focuses the second field in the task (the resource picker). When I hit enter from there it adds a new task (since I have now finished editing that task). Is that not what is happening for you?

And regarding "Issue 2" (step 3 image above), it should add more tasks if you keep on pressing enter. Is that unexpected behaviour in your app?

They should not end up in any other column though, that is a focus issue. When the column scrolls focus is lost to the add button in the first column. Have opened a separate issue on that: https://github.com/bryntum/support/issues/4576

Issue 3 is the same as the new issue I opened ^. A symptom of focus moving to unexpected element.

Decided to close the original issue and keep the new more on point one.