Text selection on title don't work

[vovsemenv]

trafficstars

For some reason, I can't start the text selection process on the tree item title. To select any text, i need to start selection outside of tree

code to reprodcue

import {
  StaticTreeDataProvider,
  Tree,
  UncontrolledTreeEnvironment,
} from "react-complex-tree";
import "react-complex-tree/lib/style-modern.css";

export const App = () => {
  const items = {
    root: {
      index: "root",
      isFolder: true,
      children: ["child1", "child2"],
      data: "Root item",
    },
    child1: {
      index: "child1",
      children: [],
      data: "Very long test case",
    },
    child2: {
      index: "child2",
      isFolder: true,
      children: ["child3"],
      data: "Child item 2",
    },
    child3: {
      index: "child3",
      children: [],
      data: "Child item 3",
    },
  };

  return (
    <UncontrolledTreeEnvironment
      dataProvider={
        new StaticTreeDataProvider(items, (item, data) => ({ ...item, data }))
      }
      getItemTitle={(item) => item.data}
      viewState={{}}
    >
      <Tree treeId="tree-1" rootItem="root" treeLabel="Tree Example" />
    </UncontrolledTreeEnvironment>
  );
};

[lukasbach]

Hi, thanks for your report! The tree node DOM items are provided with a "draggable" attribute, which means that clicking with the mouse an them and dragging, which is usually the behavior for selecting text, will drag the entire item instead, and surpress the text selection that would otherwise happen on the text within the item. In general, supporting both manually selecting text in an elemnent and also supporting to drag that item won't work, in any browser. Or am I misunderstanding the issue?

[vovsemenv]

You understand it correctly. Maybe there is a way to change drag handle selector so i can drag item by cliching on it instead of whole item?

[lukasbach]

Hm, I'd say your best bet is to use a custom interaction manager implementation, that allows you to customize the props provided to the interactive element, there you can write the logic of how the interactive element is rendered yourself: https://rct.lukasbach.com/docs/guides/interaction-modes#custom-interaction-modes