diff --git a/.changeset/real-points-jump.md b/.changeset/real-points-jump.md index 1fcb782a9..0ebe25967 100644 --- a/.changeset/real-points-jump.md +++ b/.changeset/real-points-jump.md @@ -2,4 +2,4 @@ "@hi-ui/tree": patch --- -fix: 修复编辑框内容无法选中问题 +fix: 修复可拖拽模式下编辑框内容无法选中问题 diff --git a/packages/ui/tree/src/use-tree-action.tsx b/packages/ui/tree/src/use-tree-action.tsx index c23abae67..9c0f0d35e 100644 --- a/packages/ui/tree/src/use-tree-action.tsx +++ b/packages/ui/tree/src/use-tree-action.tsx @@ -103,6 +103,8 @@ export const useTreeEditProps = ( onDelete ) + const [editing, setEditing] = React.useState(false) + const renderTitleWithEditable = (node: FlattedTreeNodeData, title?: React.ReactNode) => { return ( ( focusTree={focusTree} onExpand={tryToggleExpandedIds} actionRender={actionRender} + onEditStatusChange={setEditing} /> ) } @@ -138,6 +141,8 @@ export const useTreeEditProps = ( const treeProps = { ...nativeTreeProps, + // hotfix: https://github.com/XiaoMi/hiui/issues/2697 + draggable: editing ? false : nativeTreeProps.draggable, fieldNames, render: proxyTitleRender, data: editable ? treeData : data, @@ -194,11 +199,15 @@ export interface EditableTreeProps extends TreeProps { } const EditableTreeNodeTitle = (props: EditableTreeNodeTitleProps) => { - const { prefixCls, node, title, actionRender } = props + const { prefixCls, node, title, actionRender, onEditStatusChange } = props // 如果是添加节点,则进入节点编辑临时态 const [editing, editingAction] = useToggle(() => node.raw.type === TreeNodeType.ADD || false) + React.useEffect(() => { + onEditStatusChange?.(editing) + }, [editing, onEditStatusChange]) + if (editing) { return } @@ -226,6 +235,7 @@ interface EditableTreeNodeTitleProps { menuOptions?: TreeMenuActionOption[] | ((node: FlattedTreeNodeData) => TreeMenuActionOption[]) focusTree: () => void actionRender?: (node: FlattedTreeNodeData, editActions: TreeEditActions) => React.ReactNode | null + onEditStatusChange?: (editing: boolean) => void } const EditableNodeMenu = (props: EditableNodeMenuProps) => { @@ -431,9 +441,6 @@ const EditableNodeInput = (props: EditableNodeInputProps) => { value={inputValue} onChange={handleChange} onKeyDown={onKeydown} - // hotfix: https://github.com/XiaoMi/hiui/issues/2697 - draggable - onDragStart={(evt) => evt.preventDefault()} />