From a943aefa4dcd2405fe2696b6436f729e0b493bd7 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Thu, 27 Jun 2024 11:29:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20use=20useUpdateNodeInternals=20to=20sol?=
 =?UTF-8?q?ve=20the=20issue=20that=20the=20newly=20ad=E2=80=A6=20(#1287)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### What problem does this PR solve?

feat: use useUpdateNodeInternals to solve the issue that the newly added
anchor points cannot be connected. #918

### Type of change

- [x] New Feature (non-breaking change which adds functionality)
---
 web/src/pages/flow/categorize-form/dynamic-categorize.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/web/src/pages/flow/categorize-form/dynamic-categorize.tsx b/web/src/pages/flow/categorize-form/dynamic-categorize.tsx
index d02a0bce8..ee85b32a1 100644
--- a/web/src/pages/flow/categorize-form/dynamic-categorize.tsx
+++ b/web/src/pages/flow/categorize-form/dynamic-categorize.tsx
@@ -1,5 +1,6 @@
 import { CloseOutlined } from '@ant-design/icons';
 import { Button, Card, Form, Input, Select, Typography } from 'antd';
+import { useUpdateNodeInternals } from 'reactflow';
 import { useBuildCategorizeToOptions, useHandleToSelectChange } from './hooks';
 
 interface IProps {
@@ -7,6 +8,7 @@ interface IProps {
 }
 
 const DynamicCategorize = ({ nodeId }: IProps) => {
+  const updateNodeInternals = useUpdateNodeInternals();
   const form = Form.useFormInstance();
   const options = useBuildCategorizeToOptions();
   const { handleSelectChange } = useHandleToSelectChange(
@@ -21,6 +23,7 @@ const DynamicCategorize = ({ nodeId }: IProps) => {
           const handleAdd = () => {
             const idx = fields.length;
             add({ name: `Categorize ${idx + 1}` });
+            if (nodeId) updateNodeInternals(nodeId);
           };
           return (
             <div