DND is not working properly with custom renderITem

[iamravisingh]

@lukasbach with custom render item if I try to drag and drop on an item it's changing the URL somehow not sure why

Custom renderITem

export const TreeItem = (props) => {
  const { title, arrow, depth, item, context, children, showCheckbox, handleTreeItemClick } = props;
  console.log('context in treeItem >>>>>>>>>>', depth, context.isSelected);
  const theme: ApexTheme = useTheme();
  const treepadding = TreeDepth[depth || 0];

  const handleItemClick = (e) => {
    console.log(
      'interactiveElementProps >>>>>>>>>',
      context
    );
    context.interactiveElementProps.onClick(e);
    showCheckbox && context.addToSelectedItems()
  };

  const handleOnCheck = () => {
    //
  }

  const currentCheckboxProps = {
    key: item.index,
    // disabled,
    handleOnCheck,
    isChecked: context.isSelected,
    // checkboxProps,
  };

  const enableCheckbox = ( 
      showCheckbox ?
      <TreeCheckbox
        {...currentCheckboxProps}
      /> 
      : null)
  return (
    <li
      style={{
        listStyleType: 'none',
        backgroundColor: theme.colors.monochrome.offWhite,
      }}
      className="rct-tree-item-li"
      {...props.context.itemContainerWithChildrenProps}
    >
      <Box
        padding="8px"
        gap="8px"
        paddingLeft={treepadding}
        {...context.itemContainerWithoutChildrenProps}
        {...context.interactiveElementProps}
        onClick={handleItemClick}
        alignItems={`${!item.hasChildren && 'center'}`}
        cursor="pointer"
        backgroundColor={
          (context.isDraggingOver || context.isSelected && (!item.hasChildren))
          ? theme.colors.primary.bg
          : 'transparent'
        }
        borderRadius={`${context.isSelected && '8px'}`}
      >
        {arrow}
        {enableCheckbox}
        <Text
          hoverProps={{ color: theme.colors.primary.default }}
          fontFamily={theme.fontFamily}
          fontWeight={700}
          fontSize={theme.fontSizes[DeviceTypes.Desktop].bSmall}
          color={theme.colors.monochrome.label}
          showEllipsis
          showEllipsisAfter={125}
        >
          {title}
        </Text>
      </Box>
      {children}
    </li>
  );
};

UncontrolledEnvironment

  <UncontrolledTreeEnvironment
    canInvokePrimaryActionOnItemContainer
    canDragAndDrop={true}
    canReorderItems={true}
    ref={environmentRef}
    showLiveDescription={false}
    onSelectItems={handleTreeItemClick}
    onDrop={handleOnDropItem}
    renderItemArrow={({ item, context }) => (
      <TreeIcon
        expandIcon={expandIcon}
        collapseIcon={collapseIcon}
        color={theme.colors.monochrome.label}
        item={item}
        context={context}
      />
    )}
    renderItem={(renderItemProps) => (
      <TreeItem
        {...renderItemProps}
        interactionRefs={interactionRefs}
        showCheckbox={showCheckbox}
        onItemClick={handleTreeItemClick}
      />
    )}
    renderDragBetweenLine={CustomRenderers.renderDragBetweenLine}
    dataProvider={
      new StaticTreeDataProvider(treeItem.items, (item, data) => {
        return {
          ...item,
          data,
        };
      })
    }
    getItemTitle={(item) => item.data}
    viewState={{
      tree1: {
        selectedItems: [...defaultSelectedItems],
        // disabledItems: [...disabledTreeItems] //we can check the context in treeItemRenderer to build the logic
      },
    }}
  >
    <Tree
      treeId={TreeResource.fTree.id}
      rootItem="root"
      treeLabel={TreeResource.fTree.label}
      ref={treeRef}
    />
  </UncontrolledTreeEnvironment>

[lukasbach]

Hm that is odd, in your code I don't see anything that would suggest it would change the URL on drop. Are there any anchor (a) elements rendered as part of your render logic? Maybe dropping them is causing a reroute. To which URL is it changing, is this URL defined somewhere in code?

[iamravisingh]

@lukasbach Thanks for the reply.
I have resolved this issue. I added a div wrapper to my children inside li in renderItem then it worked fine. Not sure why it was causing URL change though.