[tree view] Unable to pass refs from RichTreeView to slot component

[ccennis]

I have been sawing at this for ages, and I cannot figure out what I am doing wrong. I want to drag and drop these items within my DragTreeItem component but I cannot seem to pass a non-null ref via slotProps.

const getItemRef = (itemId) => {
    if (!itemRefs.current[itemId]) {
      itemRefs.current[itemId] = React.createRef();
    }
    return itemRefs.current[itemId];
  };

return (
    <>
      <Box sx={{ width: '100%', display: 'flex', flexDirection: 'column' }}>
        {treeData && treeData.length > 0 && (
          <Box
            sx={{
              borderBottom: '1px solid #ddd',
              paddingY: '10px',
            }}>
            <RichTreeView
              apiRef={apiRef}
              items={treeData}
              sx={{
                width: '100%',
                height: 'fit-content',
                flexGrow: 1,
                overflowY: 'auto',
              }}
              slots={{ item: DragTreeItem }}
              slotProps={{
                item: (itemProps) => ({
                  ...itemProps,
                  ref: getItemRef(itemProps.itemId),
                  handleCreateCollection,
                  onItemDrop,
                  disabled: false,
                }),
              }}
            />
          </Box>
        )}
      </Box>
    </>
  );

I have attempted to pass the function, the ref itself, and even tried to get the DomElement from the apiRef.

const DragTreeItem = React.forwardRef(function DragTreeItem(props, ref) {
  const {
    itemId,
    label,
    disabled = false,
    children,
    handleCreateCollection,
    onItemDrop,
    ...other
  } = props;

  React.useEffect(() => {
    if (ref && ref.current) {
      console.log(`DragTreeItem received DOM ref for ${itemId}:`, ref.current);
    } else {
      console.warn(`Ref is NULL for item ${itemId}`);
    }
  }, [ref, itemId]);

The logs always show that this ref is NULL and I cannot get my atlassian draggable variable to set. Is there a way to pass a ref correctly to a slotted component?

[michelengelen]

Hey @ccennis ... sry for the late reply.
Could you try and create a minimal reproduction in live code and tell us what you are trying to achieve in detail? I It does not have to be working, but at least something we can have a look at!
Thanks!

[ccennis]

Hey @ccennis ... sry for the late reply. Could you try and create a minimal reproduction in live code and tell us what you are trying to achieve in detail? I It does not have to be working, but at least something we can have a look at! Thanks!

i'm just an idiot and I should have used the paid RichTreeViewPro -- i was hoping to pass more via item slots but eventually gave up

[michelengelen]

Hey @ccennis ... sry for the late reply. Could you try and create a minimal reproduction in live code and tell us what you are trying to achieve in detail? I It does not have to be working, but at least something we can have a look at! Thanks!

i'm just an idiot and I should have used the paid RichTreeViewPro -- i was hoping to pass more via item slots but eventually gave up

Ahm, ok ... is this resolved for you now or do you need some help with it? 🤔