fix(tree): 兼容Firefox (#2697)

XiaoMi · Jan 3, 2024 · b97e1f7 · b97e1f7
1 parent 3caa7e5
commit b97e1f7
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git 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
@@ -103,6 +103,8 @@ export const useTreeEditProps = <T extends EditableTreeProps>(
     onDelete
   )
 
+  const [editing, setEditing] = React.useState<boolean>(false)
+
   const renderTitleWithEditable = (node: FlattedTreeNodeData, title?: React.ReactNode) => {
     return (
       <EditableTreeNodeTitle
@@ -120,6 +122,7 @@ export const useTreeEditProps = <T extends EditableTreeProps>(
         focusTree={focusTree}
         onExpand={tryToggleExpandedIds}
         actionRender={actionRender}
+        onEditStatusChange={setEditing}
       />
     )
   }
@@ -138,6 +141,8 @@ export const useTreeEditProps = <T extends EditableTreeProps>(
 
   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 <EditableNodeInput {...props} editingAction={editingAction} />
   }
@@ -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()}
       />
       <span className={`${prefixCls}__action`}>
         <IconButton