[TreeView] Fix drag and drop issue with label editing

packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.itemPlugin.ts

@@ -6,6 +6,7 @@ import {
   UseTreeViewItemsSignature,
   isTargetInDescendants,
   useSelector,
+  selectorIsItemBeingEdited,
 } from '@mui/x-tree-view/internals';
 import {
   UseTreeItemDragAndDropOverlaySlotPropsFromItemsReordering,
@@ -15,6 +16,7 @@ import {
   UseTreeItemContentSlotPropsFromItemsReordering,
 } from './useTreeViewItemsReordering.types';
 import {
+  selectorDraggedItem,
   selectorItemsReorderingDraggedItemProperties,
   selectorItemsReorderingIsValidTarget,
 } from './useTreeViewItemsReordering.selectors';
@@ -34,6 +36,9 @@ export const useTreeViewItemsReorderingItemPlugin: TreeViewItemPlugin = ({ props
     itemId,
   );
   const isValidTarget = useSelector(store, selectorItemsReorderingIsValidTarget, itemId);
+  const draggedItemId = useSelector(store, selectorDraggedItem);
+
+  const isBeingEdited = useSelector(store, selectorIsItemBeingEdited, draggedItemId);
 
   return {
     propsEnhancers: {
@@ -44,7 +49,8 @@ export const useTreeViewItemsReorderingItemPlugin: TreeViewItemPlugin = ({ props
       }): UseTreeItemRootSlotPropsFromItemsReordering => {
         if (
           !itemsReordering.enabled ||
-          (itemsReordering.isItemReorderable && !itemsReordering.isItemReorderable(itemId))
+          (itemsReordering.isItemReorderable && !itemsReordering.isItemReorderable(itemId)) ||
+          isBeingEdited
         ) {
           return {};
         }
@@ -79,6 +85,7 @@ export const useTreeViewItemsReorderingItemPlugin: TreeViewItemPlugin = ({ props
 
         const handleRootDragOver = (event: React.DragEvent & TreeViewCancellableEvent) => {
           externalEventHandlers.onDragOver?.(event);
+
           if (event.defaultMuiPrevented) {
             return;
           }
@@ -88,6 +95,7 @@ export const useTreeViewItemsReorderingItemPlugin: TreeViewItemPlugin = ({ props
 
         const handleRootDragEnd = (event: React.DragEvent & TreeViewCancellableEvent) => {
           externalEventHandlers.onDragEnd?.(event);
+
           if (event.defaultMuiPrevented) {
             return;
           }
@@ -106,12 +114,13 @@ export const useTreeViewItemsReorderingItemPlugin: TreeViewItemPlugin = ({ props
         externalEventHandlers,
         contentRefObject,
       }): UseTreeItemContentSlotPropsFromItemsReordering => {
-        if (!isValidTarget) {
+        if (!isValidTarget || isBeingEdited) {
           return {};
         }
 
         const handleDragOver = (event: React.DragEvent & TreeViewCancellableEvent) => {
           externalEventHandlers.onDragOver?.(event);
+
           if (event.defaultMuiPrevented || validActionsRef.current == null) {
             return;
           }

packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.ts

@@ -41,6 +41,15 @@ export const selectorItemsReorderingDraggedItemProperties = createSelector(
   },
 );
 
+/**
+ * Get the id of the item that is currently being dragged.
+ * @param {TreeViewState<[UseTreeViewItemsReorderingSignature]>} state The state of the tree view.
+ * @returns {string | null} The id of the currently dragged item.
+ */
+export const selectorDraggedItem = createSelector(
+  [selectorItemsReordering],
+  (itemsReordering) => itemsReordering?.draggedItemId,
+);
 /**
  * Check if the current item is a valid target for the dragged item.
  * @param {TreeViewState<[UseTreeViewItemsReorderingSignature]>} state The state of the tree view.

packages/x-tree-view/src/hooks/useTreeItemUtils/useTreeItemUtils.tsx

@@ -130,7 +130,7 @@ export const useTreeItemUtils = <
       return;
     }
 
-    if (!status.focused) {
+    if (!status.focused && !status.editing) {
       instance.focusItem(event, itemId);
     }
 

packages/x-tree-view/src/internals/index.ts

@@ -67,6 +67,7 @@ export type {
   UseTreeViewItemsState,
 } from './plugins/useTreeViewItems';
 export { useTreeViewLabel } from './plugins/useTreeViewLabel';
+export { selectorIsItemBeingEdited } from './plugins/useTreeViewLabel/useTreeViewLabel.selectors';
 export type {
   UseTreeViewLabelSignature,
   UseTreeViewLabelParameters,

packages/x-tree-view/src/internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors.ts

@@ -34,6 +34,6 @@ export const selectorIsItemEditable = createSelector(
  * @returns {boolean} `true` if the item is being edited, `false` otherwise.
  */
 export const selectorIsItemBeingEdited = createSelector(
-  [selectorTreeViewLabelState, (_, itemId: string) => itemId],
-  (labelState, itemId) => labelState.editedItemId === itemId,
+  [selectorTreeViewLabelState, (_, itemId: string | null) => itemId],
+  (labelState, itemId) => (itemId ? labelState.editedItemId === itemId : false),
 );