fix(core): values in edit not saved when closing info modal (#7465)

Before the modification, when the modal is closed, if a value is being edited, the input's on blur event cannot be triggered to automatically save.

https://github.com/toeverything/AFFiNE/assets/102217452/60235cec-0022-4c4d-b213-28f2331a0c5b

packages/frontend/core/src/components/affine/page-properties/info-modal/info-modal.css.ts

@@ -1,13 +1,46 @@
 import { cssVar } from '@toeverything/theme';
-import { style } from '@vanilla-extract/css';
+import { createVar, keyframes, style } from '@vanilla-extract/css';
 
-export const container = style({
+export const animationTimeout = createVar();
+
+const contentShow = keyframes({
+  from: {
+    opacity: 0,
+  },
+  to: {
+    opacity: 1,
+  },
+});
+const contentHide = keyframes({
+  to: {
+    opacity: 0,
+  },
+  from: {
+    opacity: 1,
+  },
+});
+
+export const overlay = style({
+  selectors: {
+    '&.entered, &.entering': {
+      animation: `${contentShow} ${animationTimeout} forwards`,
+    },
+    '&.exited, &.exiting': {
+      animation: `${contentHide} ${animationTimeout} forwards`,
+    },
+  },
+});
+
+export const container = style([
+  overlay,
+  {
     maxWidth: 480,
     minWidth: 360,
     padding: '20px 0',
     alignSelf: 'start',
     marginTop: '120px',
-});
+  },
+]);
 
 export const titleContainer = style({
   display: 'flex',
@@ -37,3 +70,9 @@ export const scrollBar = style({
   width: 6,
   transform: 'translateX(-4px)',
 });
+
+export const hiddenInput = style({
+  width: '0',
+  height: '0',
+  position: 'absolute',
+});

packages/frontend/core/src/components/affine/page-properties/info-modal/info-modal.tsx

@@ -12,7 +12,17 @@ import {
   useService,
   type Workspace,
 } from '@toeverything/infra';
-import { Suspense, useCallback, useContext, useMemo, useRef } from 'react';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import clsx from 'clsx';
+import {
+  Suspense,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import { useTransition } from 'react-transition-state';
 
 import { BlocksuiteHeaderTitle } from '../../../blocksuite/block-suite-header/title';
 import { managerContext } from '../common';
@@ -27,6 +37,8 @@ import * as styles from './info-modal.css';
 import { TagsRow } from './tags-row';
 import { TimeRow } from './time-row';
 
+const animationTimeout = 120;
+
 export const InfoModal = ({
   open,
   onOpenChange,
@@ -39,7 +51,17 @@ export const InfoModal = ({
   workspace: Workspace;
 }) => {
   const titleInputHandleRef = useRef<InlineEditHandle>(null);
+
+  const [{ status }, toggle] = useTransition({
+    timeout: animationTimeout,
+  });
+
+  useEffect(() => {
+    toggle(open);
+  }, [open, toggle]);
+
   const manager = usePagePropertiesManager(page);
+
   const handleClose = useCallback(() => {
     onOpenChange(false);
   }, [onOpenChange]);
@@ -58,11 +80,20 @@ export const InfoModal = ({
 
   return (
     <Modal
-      contentOptions={{
+      overlayOptions={{
-        className: styles.container,
+        className: clsx(styles.overlay, status),
-        'aria-describedby': undefined,
+        style: assignInlineVars({
+          [styles.animationTimeout]: `${animationTimeout}ms`,
+        }),
       }}
-      open={open}
+      contentOptions={{
+        className: clsx(styles.container, status),
+        'aria-describedby': undefined,
+        style: assignInlineVars({
+          [styles.animationTimeout]: `${animationTimeout}ms`,
+        }),
+      }}
+      open={status !== 'exited'}
       onOpenChange={onOpenChange}
       withoutCloseButton
     >