Our flexible Kanban board for managing tasks with drag drop
Hey Team,
Happy Tuesday! Today I encountered a nasty little full application crash when working with the Kanban collapse/expand functionality.
We are using custom jsx in our Kanban config:
bodyItems: {
name: {
type: 'jsx',
jsx: ({ taskRecord }) => {
return (
<div>Test</div>
);
},
},
},
When the column is collapsed no error is thrown, everything is fine. When expanded, however, the entire application crashes with this error:
Screen Shot 2024-02-13 at 10.52.00.png (400.42 KiB) Viewed 326 times
I don't have sample code to upload but you can easily add that code I provided to one of your demos and see if it crashes for you.
Thanks guys.
Hi Alex,
Yeah man, easy. All you need to do is add my code snippet to your taskBoardConfig file (or just drop it directly in as a prop to BryntumTaskBoard).
Could you please share the code used to render the JSX for the demo you provided?
You have sources for all examples in /examples/ folder of sources you downloaded on CustomerZone.
This demo places in /examples/frameworks/react-vite/task-items
It uses next code for jsx:
bodyItems : {
taskDate : {
type : 'jsx',
jsx : ({ value, taskRecord } : { value : Date; taskRecord : CustomTask }) =>
<JsxDate value = {value} duration = {taskRecord.duration}/>
},
progress : {
type : 'jsx',
jsx : ({ value } : { value : number }) => {
return <JsxProgress value={value}/>;
}
}
I also tried to replace real JSX to div, it's still working. Maybe you meant another expand functionality, not column expanding?
Thank you for sharing the code.
I definitely mean the column expand feature:
Screen Shot 2024-02-13 at 15.06.44.png (9.64 KiB) Viewed 317 times
Screen Shot 2024-02-13 at 15.06.51.png (14.32 KiB) Viewed 317 times
The thing is I can reproduce this error 10/10. If the return has ANY markup inside of it, the app crashes. If I JUST return text, no crash. So this works:
bodyItems: {
name: {
type: 'jsx',
jsx: ({ taskRecord }) => {
return Test;
},
},
},
But this crashes every time:
bodyItems: {
name: {
type: 'jsx',
jsx: ({ taskRecord }) => {
return <div>Test</div>;
},
},
},
Hi,
I tried with the code you provided but it's working fine here. Could you please share a runnable test case with the steps to reproduce it so we can debug the issue?
