Drag and Drop does not work when title is Anchor <a> tag

[manoelneto]

Describe the bug Drag and Drop does not work when title is Anchor tag

To Reproduce Go to https://rct.lukasbach.com/docs/guides/drag-and-drop#dropping-everywhere-is-allowed Add the code below

renderItemTitle={({
        context,
        info,
        item,
        title,
      }) => (
        <a href='/foo'>{title}</a>
      )}

Try to drag and drop. it doesn't work.

Replace the anchor tag with span tag.

Try to drag and drop. it works.

Expected behavior Allow to drag and drop when the item title is an anchor tag

Screencasts https://www.loom.com/share/b7bdcd9cdfac41ff9644fe9607dda2ba

Desktop (please complete the following information):

• OS: Mac
• Browser Chrome
• Version Version 122.0.6261.112 (Official Build) (arm64)

[lukasbach]

Hi, thanks for your report! renderItemTitle is only supposed to render the actual title, the interactive component (by default a button) is rendered by renderItem. In your example, this will lead to an anchor element rendered within a button element, and even though I'm not completely sure why that doesn't work, it's not semantic HTML either. Would it work in your case to use the renderItem prop instead to use the anchor element?

This is an example with the default renderItem method customized to render anchor elements

https://codesandbox.io/p/sandbox/react-complex-tree-playground-forked-gqxztt

[manoelneto]

Thanks @lukasbach I'll take a look

[manoelneto]

We're already overriding the renderItem function with some divs. I tried to use the anchor link directly into the renderItem method and it didn't work. I guess our app has some of event in all anchors that is preventing this. I'll continue investigate it. Thanks

[manoelneto]

I found the issue.

We need to make the link to be the "draggable" by adding {...(context.interactiveElementProps as any)} the props in it. I was doing this in a parent component.

Thanks very much, your example helped a lot

[lukasbach]

Happy to hear you got it to work!