onclick is not working if i pass other then button html element on renderItem hook

[iamravisingh]

I am trying to add a custom treeItem but having issues while expanding. click is not working if I try to add that on other than the button element. Can you help me with what I am missing here, any help is appreciated.

  <UncontrolledTreeEnvironment
    renderItemTitle={({ title }) => <span>{title}+1</span>}
    renderItemArrow={({ item, context }) => (
      <TreeIcon
        expandIcon={expandIcon}
        collapseIcon={collapseIcon}
        color={theme.colors.monochrome.label}
        item={item}
        context={context}
      />
    )}
    renderItem={(renderItemProps) => <TreeItem {...renderItemProps}/>}
    dataProvider={
      new StaticTreeDataProvider(treeItem.items, (item, data) => {
        return {
          ...item,
          data,
        };
      })
    }
    getItemTitle={(item) => item.data}
    viewState={{}}
  >
    <Tree treeId="tree-1" rootItem="root" treeLabel="Tree Listing" />
  </UncontrolledTreeEnvironment>
   
**TreeItem**          
export const TreeItem = (props) => {
  const { title, arrow, depth, context, children, hasChildren } = props;
  const { collapseItem, expandItem } = context 

  const callback = context.hasChildren
  ? context.isExpanded
    ? expandItem
    : collapseItem
  : '';

  const theme: ApexTheme = useTheme();
  return (
    <Box
      width="100%"
      margin= "0"
      display= 'flex'
      flexDirection= 'column'
      alignItem= 'flex-start'
      padding="8px"
      gap="4px"
      backgroundColor={theme.colors.monochrome.offWhite}
      {...context.itemContainerWithChildrenProps}
    >
      <Text
        name=""
        display="flex"
        type={ButtonTypes.Text}
        fontFamily={theme.fontFamily}
        width="72px"
        height="22px"
        fontWeight={700}
        onClick={callback}
        fontSize={theme.fontSizes[DeviceTypes.Desktop].bSmall}
        color={theme.colors.monochrome.label}
        {...context.itemContainerWithoutChildrenProps}
        {...context.interactiveElementProps}
      >
        {arrow}{title}
      </Text>
      {children}
    </Box>
  );
};

@lukasbach @dlech @alexdarling

[lukasbach]

Hi @iamravisingh. Yes, interactiveElementProps is defining it's own onClick handler and is overwriting your own onclick callback. Try something like this

      <Text
        {/* ... remaining props */}
        {...context.itemContainerWithoutChildrenProps}
        {...context.interactiveElementProps}
        onClick={e => {
          callback(e);
          context.interactiveElementProps(e);
        }}
      >

[iamravisingh]

@lukasbach Thanks for your comment.

I think interactiveElementProps is an object which can be used as
context.interactiveElementProps.onClick(e) ( correct me if I am wrong )

I have added an onclick on Box wrapper against the Text component which is working fine. However, while expanding the children's list it collapses the entire tree. Please check the attached video for your reference.

custom-treeItem.webm

[iamravisingh]

@lukasbach Thanks I have resolved this issue.
we can use context.toggleExpandedState() or context.interactiveElementProps.onClick(e). However, I am using toggleExpandedState