Fix: Fixed the issue that events cannot be triggered after the shadcn-ui dialog is closed #3221. (#6108)

### What problem does this PR solve?

Fix: Fixed the issue that events cannot be triggered after the shadcn-ui
dialog is closed #3221.

Refer to [Combobox in a form in a dialog isn't working.
#1748](https://github.com/shadcn-ui/ui/issues/1748#issuecomment-2720130543)

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/package.json

@@ -31,15 +31,15 @@
     "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-collapsible": "^1.1.3",
-    "@radix-ui/react-dialog": "^1.1.6",
-    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-dialog": "1.1.4",
+    "@radix-ui/react-dropdown-menu": "2.1.4",
     "@radix-ui/react-icons": "^1.3.1",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-navigation-menu": "^1.2.1",
-    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-popover": "1.1.4",
     "@radix-ui/react-progress": "^1.1.1",
     "@radix-ui/react-scroll-area": "^1.2.2",
-    "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-select": "2.1.4",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slider": "^1.2.1",
     "@radix-ui/react-slot": "^1.1.0",
@@ -138,5 +138,8 @@
   },
   "engines": {
     "node": ">=18.20.4"
+  },
+  "overrides": {
+    "@radix-ui/react-dismissable-layer": "1.1.4"
   }
 }

web/src/components/ui/transfer-list.tsx

@@ -8,7 +8,7 @@ import {
   SquareCheckIcon,
   SquareIcon,
 } from 'lucide-react';
-import React from 'react';
+import React, { memo, useCallback, useEffect } from 'react';
 
 export type TransferListItemType = {
   key: string;
@@ -16,42 +16,73 @@ export type TransferListItemType = {
   selected?: boolean;
 };
 
-export default function TransferList({
-  items,
-}: {
+type TransferListProps = {
   items: TransferListItemType[];
-}) {
-  const [leftList, setLeftList] = React.useState<TransferListItemType[]>(items);
+  targetKeys?: string[];
+  onChange?(targetKeys: string[], direction: 'left' | 'right'): void;
+};
+
+export const TransferList = memo(function ({
+  items,
+  onChange,
+  targetKeys,
+}: TransferListProps) {
+  const [leftList, setLeftList] = React.useState<TransferListItemType[]>([]);
   const [rightList, setRightList] = React.useState<TransferListItemType[]>([]);
   const [leftSearch, setLeftSearch] = React.useState('');
   const [rightSearch, setRightSearch] = React.useState('');
 
-  const moveToRight = () => {
+  const moveToRight = useCallback(() => {
     const selectedItems = leftList.filter((item) => item.selected);
-    setRightList([...rightList, ...selectedItems]);
+    const rightItems = [...rightList, ...selectedItems];
+    setRightList(rightItems);
     setLeftList(leftList.filter((item) => !item.selected));
-  };
+    onChange?.(
+      rightItems.map((x) => x.key),
+      'right',
+    );
+  }, [leftList, onChange, rightList]);
 
-  const moveToLeft = () => {
+  const moveToLeft = useCallback(() => {
     const selectedItems = rightList.filter((item) => item.selected);
-    setLeftList([...leftList, ...selectedItems]);
-    setRightList(rightList.filter((item) => !item.selected));
-  };
+    setLeftList((list) => [...list, ...selectedItems]);
+    const rightItems = rightList.filter((item) => !item.selected);
+    setRightList(rightItems);
+    onChange?.(
+      rightItems.map((x) => x.key),
+      'left',
+    );
+  }, [onChange, rightList]);
 
-  const toggleSelection = (
-    list: TransferListItemType[],
-    setList: React.Dispatch<React.SetStateAction<TransferListItemType[]>>,
-    key: string,
-  ) => {
-    const updatedList = list.map((item) => {
-      if (item.key === key) {
-        return { ...item, selected: !item.selected };
-      }
-      return item;
-    });
+  const toggleSelection = useCallback(
+    (
+      list: TransferListItemType[],
+      setList: React.Dispatch<React.SetStateAction<TransferListItemType[]>>,
+      key: string,
+    ) => {
+      const updatedList = list.map((item) => {
+        if (item.key === key) {
+          return { ...item, selected: !item.selected };
+        }
+        return item;
+      });
 
-    setList(updatedList);
-  };
+      setList(updatedList);
+    },
+    [],
+  );
+
+  useEffect(() => {
+    const leftItems = items.filter(
+      (x) => !targetKeys?.some((y) => y === x.key),
+    );
+    console.log('🚀 ~ useEffect ~ leftItems:', leftItems);
+    setLeftList(leftItems);
+    const rightItems = items.filter((x) =>
+      targetKeys?.some((y) => y === x.key),
+    );
+    setRightList(rightItems);
+  }, [items, targetKeys]);
 
   return (
     <div className="flex space-x-4">
@@ -148,4 +179,6 @@ export default function TransferList({
       </div>
     </div>
   );
-}
+});
+
+TransferList.displayName = 'TransferList';