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)
This commit is contained in:
balibabu 2025-03-14 17:36:24 +08:00 committed by GitHub
parent e5a8b23684
commit 1842ca0334
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 1026 additions and 367 deletions

1295
web/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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"
}
}

View File

@ -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';