Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[TreeView] Fix drag and drop issue with label editing #15636

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

noraleonte
Copy link
Contributor

closes #15533

@noraleonte noraleonte added bug 🐛 Something doesn't work component: tree view TreeView, TreeItem. This is the name of the generic UI component, not the React module! labels Nov 27, 2024
@noraleonte noraleonte self-assigned this Nov 27, 2024
@mui-bot
Copy link

mui-bot commented Nov 27, 2024

Deploy preview: https://deploy-preview-15636--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 6b37ea3

Copy link
Member

@flaviendelangle flaviendelangle left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll check the behavior later 🙏

@@ -7,6 +7,7 @@ import {
isTargetInDescendants,
useSelector,
} from '@mui/x-tree-view/internals';
import { selectorIsItemBeingEdited } from '@mui/x-tree-view/internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This one has to be exported from internals/index.ts

@@ -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 as string);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const isBeingEdited = useSelector(store, selectorIsItemBeingEdited, draggedItemId as string);
If `draggedItemId` can be null, you can do:
const isBeingEdited = useSelector(
store,
state => draggedItemId == nul ? false : selectorIsItemBeingEdited(draggedItemId),
);

Or you can update selectorIsItemBeingEdited to support null, which would make sense to me as well.

/**
* Get the id of the item that is currently being dragged.
* @param {TreeViewState<[UseTreeViewItemsReorderingSignature]>} state The state of the tree view.
* @returns {string} The id of the currently dragged item.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems to be missing null

*/
export const selectorDraggedItem = createSelector(
[selectorItemsReordering],
(itemsReordering) => itemsReordering && itemsReordering.draggedItemId,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
(itemsReordering) => itemsReordering && itemsReordering.draggedItemId,
(itemsReordering) => itemsReordering?.draggedItemId

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: tree view TreeView, TreeItem. This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[tree view] Can't move RichTreeView editable label input caret when itemsReordering is enabled (Firefox)
3 participants