[TreeView] Fix drag and drop issue with label editing #15636
Conversation
noraleonte
added
bug 🐛
|
Deploy preview: https://deploy-preview-15636--material-ui-x.netlify.app/ |
...ro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.itemPlugin.ts
Outdated
Show resolved
Hide resolved
...ro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.itemPlugin.ts
Outdated
Show resolved
Hide resolved
...pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.ts
Outdated
Show resolved
Hide resolved
...pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.ts
Outdated
Show resolved
Hide resolved
| @@ -34,6 +36,9 @@ export const useTreeViewItemsReorderingItemPlugin: TreeViewItemPlugin = ({ props | |||
| itemId, | |||
| ); | |||
| const isValidTarget = useSelector(store, selectorItemsReorderingIsValidTarget, itemId); | |||
| const draggedItemId = useSelector(store, selectorDraggedItem); | |||
There was a problem hiding this comment.
This will cause every item to re-render everytime draggedItemId changes.
You could create a selectorIsDraggedItemBeingEdited, but same you will still re-render every item everytime you start dragging your edited item.
Could you instead prevent putting in the state an item that is being edited in the first place?
There was a problem hiding this comment.
Doesn't seem to solve the problem. The best thing I could think of is to disable dragging when editing is enabled on any item. WDYT?
|
|
||
| const isBeingEdited = useSelector(store, selectorIsItemBeingEdited, draggedItemId); | ||
| const isEditing = useSelector(store, selectorIsAnItemEdited); |
There was a problem hiding this comment.
This will re-render all the items when starting editing.
In term of perfs, I think the best trade-off would be:
-
Use
!!isItemEditableinstead ofisEditingon line 54 (if the label editing is not configured at all then we don't create the callbacks -
Use the selector to know if an item is being edited inside
handleDragStart,handleRootDragOverandhandleRootDragEnd
The only diff is that draggable would be true even when editing an item, not sure if thats a problem.
If it is, then I don't have a great solution to avoid the full re-render 😬
closes #15533