[REACT] Swimlanes not collapsing, throwing an error

[jasonlunsford]

Dear Support,

We have swimlanes working correctly now (thanks again Marcio). However, when attempting to expand / collapse the swimlane I'm seeing this error message. Not sure why?

Screen Shot 2023-08-17 at 15.23.23.png (192.81 KiB) Viewed 473 times

Here's my swimlane config code:

  const onGroupByChange = (payload) => {
    setGroupByItem(payload);

switch (payload) {
  case 'none':
    boardRef.current.instance.swimlaneField = null;
    boardRef.current.instance.swimlanes.removeAll();
    break;

  case 'lookupActionType':
    boardRef.current.instance.swimlaneField = 'lookupActionType';
    boardRef.current.instance.swimlanes.removeAll();
    boardRef.current.instance.swimlanes.add([
      { id: 'Internal Deliverable', text: 'Internal Deliverable', collapsible: true },
      { id: 'Client Deliverable', text: 'Client Deliverable', collapsible: true },
      { id: 'Event', text: 'Event', collapsible: true },
    ]);
    break;

  case 'workstream':

    break;

  case 'assigneeUserId':
    boardRef.current.instance.swimlaneField = 'assigneeUserId';
    boardRef.current.instance.swimlanes.removeAll();
    boardRef.current.instance.swimlanes.add(props.owners.map((owner) => {
      return {
        id: owner.userId, text: `${owner.firstName} ${owner.lastName}`, collapsible: true
      };
    }));
    break;

  default:
    break;
}
  }

[marcio]

Hey Jason,

Do all your owners (props.owners) have userId? I tried on our demo with the following code and it worked just fine. https://bryntum.com/products/taskboard/examples/swimlanes/

taskBoard.swimlanes.add({ id, text : `Swimlane #${id}`, collapsible: true });

[jasonlunsford]

Hmm interesting. Can you, in your demo code, also try setting swimlaneField to something different, just to see what impact that has? To answer your question yeah all my owners have ownerId (I'm working with a local JSON file and was able to confirm that). Also, this happens for the "lookupActionType" swimlane as well. I'm wondering if something else BESIDES swimlanes and swimlaneField needs to be configured?

[tasnim]

Hi,

It is working fine here. Could you please provide us a runnable test so can test and debug it?
Please make sure you're using the latest version to reproduce the issue!

Best regards,
Tasnim

[jasonlunsford]

Hi Tasnim,

I will check that I'm using the latest version - right now we're on 5.5.1. Due to corporate policy I cannot provide runnable code, but I'm very happy to share code samples (I am allowed to do that). I think I could help you guys debug this if there was a non-minified version of taskboard.module.js, because the error thrown is within that file. Do you have a non-minified version of taskboard.module.js I could inject into my node_modules directory and use to help troubleshoot?

If for that's not allowed, what additional code can I show you to help troubleshoot this issue?

[jasonlunsford]

Hi Tasnim,

Okay, I just tested something - I added the swimlaneField and swimlane collection to my board config object, like this:

  // Swimlanes
  swimlaneField: 'lookupActionType',
  swimlanes: [
    {
      id: 'Internal Deliverable',
      text: 'Internal Deliverable',
      collapsible: true,
    },
    { id: 'Client Deliverable', text: 'Client Deliverable', collapsible: true },
    { id: 'Event', text: 'Event', collapsible: true },
  ],

And the collapse / expand problem goes away. So the issue here, I think, is adding the Swimlane Field and Swimlanes collection programmatically. I'll continue to investigate - but hopefully this helps you guys tweak your test code to see whether you can confirm this issue.

[jasonlunsford]

Tasnim,

Another follow up. Adding a static swimlane field and collection of swimlanes to the configuration object also causes the programmatically modified swimlane field / swimlanes collection to NOT work correctly. I can reproduce this pretty easily.

If you configure swimlanes manually (as I did in my last comment), then take this code (which works when no swimlanes are configured manually) you'll see the swimlanes no longer change. Changing the swimlaneField appears to be okay, but the LANES do not go away:

  const onGroupByChange = (payload) => {
    setGroupByItem(payload);

switch (payload) {
  case 'none':
    boardRef.current.instance.swimlaneField = null;
    boardRef.current.instance.swimlanes.removeAll();
    break;

  case 'lookupActionType':
    boardRef.current.instance.swimlaneField = 'lookupActionType';
    boardRef.current.instance.swimlanes.removeAll();
    boardRef.current.instance.swimlanes.add([
      { id: 'Internal Deliverable', text: 'Internal Deliverable', collapsible: true },
      { id: 'Client Deliverable', text: 'Client Deliverable', collapsible: true },
      { id: 'Event', text: 'Event', collapsible: true },
    ]);
    break;

  case 'workstream':

    break;

  case 'assigneeUserId':
    boardRef.current.instance.swimlaneField = 'assigneeUserId';
    boardRef.current.instance.swimlanes.removeAll();
    boardRef.current.instance.swimlanes.add(props.owners.map((owner) => {
      return {
        id: owner.userId, text: `${owner.firstName} ${owner.lastName}`, collapsible: true
      };
    }));
    break;

  default:
    break;
}
  }

[marcio]

Hey Jason,

Can you assemble that piece of code with one of our demos and share it here for us to debug? That way we can confirm that's a bug.

[jasonlunsford]

Hi Marcio - happy to man - but can you please share with me a link to a demo where I can modify the code to replicate this defect?

[marcio]

Hey Jason,

You can get one by downloading the source code of our demos at the customer zone, you will have a examples folder with several React examples.