fix(component): useConfirmModal can't be closed automatically when 'o…

…nConfirm' is non-async (#6439)

packages/frontend/component/src/ui/modal/confirm-modal.stories.tsx

@@ -36,3 +36,24 @@ export const UsingHook = () => {
 
   return <Button onClick={showConfirm}>Show confirm</Button>;
 };
+
+export const AutoClose = () => {
+  const { openConfirmModal } = useConfirmModal();
+
+  const onConfirm = () => {
+    openConfirmModal({
+      cancelText: 'Cancel',
+      confirmButtonOptions: {
+        children: 'Confirm',
+      },
+      title: 'Confirm Modal',
+      children: 'Are you sure you want to confirm?',
+      onConfirm: () => console.log('Confirmed'),
+      onCancel: () => {
+        console.log('Cancelled');
+      },
+    });
+  };
+
+  return <Button onClick={onConfirm}>Show confirm</Button>;
+};

packages/frontend/component/src/ui/modal/confirm-modal.tsx

@@ -104,8 +104,8 @@ export const ConfirmModalProvider = ({ children }: PropsWithChildren) => {
 
       const onConfirm = () => {
         setLoading(true);
-        _onConfirm?.()
-          ?.then(() => onSuccess?.())
+        return Promise.resolve(_onConfirm?.())
+          .then(() => onSuccess?.())
           .catch(console.error)
           .finally(() => autoClose && closeConfirmModal());
       };