fix(component): disable CMDK list animation (#4685)

packages/frontend/core/src/components/pure/cmdk/main.css.ts

@@ -124,13 +124,15 @@ globalStyle(`${root} [cmdk-list]`, {
   minHeight: 120,
   overflow: 'auto',
   overscrollBehavior: 'contain',
-  transition: '.1s ease',
-  transitionProperty: 'height',
   height: 'min(330px, calc(var(--cmdk-list-height) + 8px))',
   padding: '0 0 8px 6px',
   scrollbarGutter: 'stable',
 });
 
+globalStyle(`${root} [cmdk-list]:not([data-opening])`, {
+  transition: 'height .1s ease',
+});
+
 globalStyle(`${root} [cmdk-list]::-webkit-scrollbar`, {
   width: 6,
   height: 6,

packages/frontend/core/src/components/pure/cmdk/main.tsx

@@ -5,7 +5,7 @@ import type { PageMeta } from '@blocksuite/store';
 import type { CommandCategory } from '@toeverything/infra/command';
 import clsx from 'clsx';
 import { useAtom, useSetAtom } from 'jotai';
-import { Suspense, useLayoutEffect, useMemo } from 'react';
+import { Suspense, useLayoutEffect, useMemo, useState } from 'react';
 
 import {
   cmdkQueryAtom,
@@ -126,8 +126,10 @@ export const CMDKContainer = ({
   query,
   children,
   pageMeta,
+  open,
   ...rest
 }: React.PropsWithChildren<{
+  open: boolean;
   className?: string;
   query: string;
   pageMeta?: PageMeta;
@@ -136,6 +138,24 @@ export const CMDKContainer = ({
   const t = useAFFiNEI18N();
   const [value, setValue] = useAtom(cmdkValueAtom);
   const isInEditor = pageMeta !== undefined;
+  const [opening, setOpening] = useState(open);
+
+  // fix list height animation on openning
+  useLayoutEffect(() => {
+    if (open) {
+      setOpening(true);
+      const timeout = setTimeout(() => {
+        setOpening(false);
+      }, 150);
+      return () => {
+        clearTimeout(timeout);
+      };
+    } else {
+      setOpening(false);
+    }
+    return;
+  }, [open]);
+
   return (
     <Command
       {...rest}
@@ -174,28 +194,32 @@ export const CMDKContainer = ({
           inEditor: isInEditor,
         })}
       />
-      <Command.List>{children}</Command.List>
+      <Command.List data-opening={opening ? true : undefined}>
+        {children}
+      </Command.List>
     </Command>
   );
 };
 
 export const CMDKQuickSearchModal = ({
   pageMeta,
+  open,
   ...props
 }: CMDKModalProps & { pageMeta?: PageMeta }) => {
   const [query, setQuery] = useAtom(cmdkQueryAtom);
   useLayoutEffect(() => {
-    if (props.open) {
+    if (open) {
       setQuery('');
     }
-  }, [props.open, setQuery]);
+  }, [open, setQuery]);
   return (
-    <CMDKModal {...props}>
+    <CMDKModal open={open} {...props}>
       <CMDKContainer
         className={styles.root}
         query={query}
         onQueryChange={setQuery}
         pageMeta={pageMeta}
+        open={open}
       >
         <Suspense fallback={<Command.Loading />}>
           <QuickSearchCommands onOpenChange={props.onOpenChange} />

tests/storybook/src/stories/quick-search/quick-search-modal.stories.tsx

@@ -30,7 +30,7 @@ export const CMDKPanelStory: StoryFn = () => {
   return (
     <>
       <CMDKModal open>
-        <CMDKContainer query={query} onQueryChange={setQuery} />
+        <CMDKContainer open query={query} onQueryChange={setQuery} />
       </CMDKModal>
     </>
   );