expandable treeview fails when expanding nodes because of the absolute positioning

[dagda1]

Here is a video of what is happening

The problem is my <VirtualRow /> component that uses absolute positioning:

import { StyledTreeItem } from './StyledTreeItem';
import { Node } from './Node';
import { VirtualItem } from '@tanstack/react-virtual';
import type { VertexNode } from "../../../../graphql/types";
import { useEffect, useRef } from 'react';

export function VirtualRow({ virtualRow, vertexNode, typename }: { virtualRow: VirtualItem<unknown>, vertexNode: VertexNode, typename: string; }): JSX.Element {
  const elementRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    virtualRow.measureElement(elementRef.current);
  }, []);
  
  return (
    <div
      key={vertexNode.id}
      ref={elementRef}
      style={{
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        transform: `translateY(${virtualRow.start}px)`,
      }}
    >
      <StyledTreeItem
        key={vertexNode.id}
        nodeId={vertexNode.id}
        label={
          <Node
            parentId={`${typename}.nodes.${virtualRow.index}`}
            node={vertexNode}
          />
        }
      />
    </div>
  )
}

Is there any way around this? I would suspect somebody has had a similar problem and might no a fix.

I would be grateful for some advice on this troubling matter.

[EliteUser]

Hello @dagda1, I'm wondering how you have implemented an animation of node closing\opening inside virtual list. I have a similar task, need to implement animation in tree, but i am stuck. Is your data a flat list?

[piecyk]

@dagda1 here we have couple of issues, one is that parent size is not updated after expending children, this can be fixed by position the whole elements as one block, checkout the example here #413 (comment)

Another is that we still need to update the size for correct calculation of visual items, this will be fixed with #405 hope it happen soonish 🤞

[dagda1]

@piecyk I hit those problems in my first iteration and then resorted to forcing an update

setTimeout(forceUpdate, 300);

It actually worked out surprisingly well

[dagda1]

but I think #405 sounds ideal

[dagda1]

Here is the forceUpdate in action
https://user-images.githubusercontent.com/118328/197854911-a01131b7-c3f1-4ba1-90ea-7e2134c38390.mp4