[REACT] TaskBoard data LOST when screen resolution changes

[jasonlunsford]

Dear Support,

We stumbled on an issue with the TaskBoard that might be a misconfigured feature or a legitimate defect. When using Chrome DevTools to view the TaskBoard at mobile resolutions (or even just changing the window dimensions by resizing the browser), the TaskBoard fires a re-render and immediately loses all of the loaded data (specifically after setTaskData fires). I verified the data is still available via props.data.

Not sure where to start on debugging this issue. I'll provide some relevant code samples:

const DeliverablesBoard = (props: DeliverablesBoardProps) => {
  const boardRef = useRef(null);
  const taskBoardConfig = useConfig();
  const [taskData, setTaskData] = useState<any[]>([]);

  useEffect(() => {
    setTaskData(props.data);
  }, [props]);
  

  ...
  

return (
<>
  <div className="deliverables-board">
    <BryntumTaskBoard
      height={'100%'}
      ref={boardRef}
      tasks={taskData}
      taskRenderer={taskRenderer}
      onRenderTask={(params) => console.log('params: ', params)}
      onBeforeColumnDrag={onBeforeColumnDrag}
      onColumnDrag={onColumnDrag}
      onBeforeColumnDrop={onBeforeColumnDrop}
      onColumnDrop={onColumnDrop}
      onColumnDragAbort={onColumnDragAbort}
      {...taskBoardConfig}
    />
  </div>
</>
  );

[tasnim]

Hi,

Try setting all data to project model

            <BryntumProjectModel
                ref={project}
                tasks={tasks}
                assignments={assignments}
                resources={resources}
            />

Does that work for you?
If it doesn't could you please provide a runnable test case so we can reproduce and debug it?

If you have any other questions or concerns, please ... We're here to assist you in any way we can.

Warm regards,
Tasnim

[jasonlunsford]

Hi Tasnim,

Not sure I understand? I'm ONLY passing task data for now - I don't have assignments or resources loaded yet. The issue is that TaskBoard literally seems to delete the data passed into it. And it does not seem to matter whether the TaskBoard is reduced in size or increased. If I load the TaskBoard into a mobile version, the data loads - when I increase the screen size, the data disappears. It seems to be the ACT of changing screen resolution sizes that causes data to disappear.

I'm not at liberty to share our entire code base, but I'm happy to provide code samples here. Please let me know what you want to see.

[tasnim]

Hi,

I'm not able to reproduce it. Could you please create a runnable test case where I can reproduce the problem and debug it?
A runnable test case will make the assistance faster.

Best regards,
Tasnim

[jasonlunsford]

Hi Tasnim,

Can you please explain what you mean by a runnable test case? My PoC code is not publicly accessible, and even if it were we would obfuscate and concatenate the JS automatically. Is there a JSFiddle type solution you guys like to use?

[tasnim]

Hi,

If you are using react 18 it could be a problem related to "double rendering"
In this version of react, the app is mounted, then unmounted and then mounted again in dev mode.
You could check if the problem persists if you remove strict in main.js:

ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode> // <-- remove
        <App />
    </React.StrictMode> // <-- remove
);

Please let us know if that solves your problem.

[jasonlunsford]

Hi Tasnim,

We are using React 17.0.2.

[marcio]

Hey Jason,

Did you try to remove React.StrictMode tag as Tasmin mentioned? Did it change anything?

By runnable test case, we mean a modified demo or Codepen that is available on our documentation, with the issue happening and a clear step-by-step of how to reproduce the issue that you're mentioning here.

[jasonlunsford]

Hey guys,

We don't use React.StrictMode, so that's one less thing to worry about. I tried a CRA with JUST our immediate business logic and TaskBoard .... and had no problems at all with disappearing data. I think the issue is on our end. I'll update this thread with the results of what we find. As always, thanks for your continued support during this PoC!

[marcio]

Hey,

Thanks for the update! Hope you find out what's causing the issue.

And please don't hesitate on asking for our support on forums if you need more assistance!