fix: should auto focus in drop-down menu (#2234)

* fix: should auto focus in drop-down menu

* fix: fix error in console

packages/core/client/src/schema-initializer/SchemaInitializer.tsx

@@ -130,7 +130,7 @@ SchemaInitializer.Button = observer(
             });
           }
           if (item.type === 'itemGroup') {
-            const label = compile(item.title);
+            const label = isString(item.title) ? compile(item.title) : item.title;
             return (
               !!item.children?.length && {
                 type: 'group',
@@ -203,7 +203,7 @@ SchemaInitializer.Item = function Item(props: SchemaInitializerItemProps) {
   }
 
   if (items?.length > 0) {
-    const renderMenuItem = (items: SchemaInitializerItemOptions[]) => {
+    const renderMenuItem = (items: SchemaInitializerItemOptions[], parentKey: string) => {
       if (!items?.length) {
         return null;
       }
@@ -212,28 +212,30 @@ SchemaInitializer.Item = function Item(props: SchemaInitializerItemProps) {
           return { type: 'divider', key: `divider-${indexA}` };
         }
         if (item.type === 'itemGroup') {
-          const label = compile(item.title);
+          const label = isString(item.title) ? compile(item.title) : item.title;
+          const key = `${parentKey}-item-group-${indexA}`;
           return {
             type: 'group',
-            key: item.key || `item-group-${indexA}`,
+            key,
             label,
             title: label,
             className: styles.nbMenuItemGroup,
-            children: renderMenuItem(item.children),
+            children: renderMenuItem(item.children, key),
           } as MenuProps['items'][0];
         }
         if (item.type === 'subMenu') {
           const label = compile(item.title);
+          const key = `${parentKey}-sub-menu-${indexA}`;
           return {
-            key: item.key || `sub-menu-${indexA}`,
+            key,
             label,
             title: label,
-            children: renderMenuItem(item.children),
+            children: renderMenuItem(item.children, key),
           };
         }
         const label = compile(item.title);
         return {
-          key: item.key || `${info.key}-${item.title}-${indexA}`,
+          key: `${parentKey}-${item.title}-${indexA}`,
           label,
           title: label,
           onClick: (info) => {
@@ -252,7 +254,7 @@ SchemaInitializer.Item = function Item(props: SchemaInitializerItemProps) {
       key: info.key,
       label: isString(children) ? compile(children) : children,
       icon: typeof icon === 'string' ? <Icon type={icon as string} /> : icon,
-      children: renderMenuItem(items),
+      children: renderMenuItem(items, info.key),
     };
 
     collectMenuItem(item);

packages/core/client/src/schema-initializer/SelectCollection.tsx

@@ -5,16 +5,35 @@ import { useTranslation } from 'react-i18next';
 export const SelectCollection = ({ value: outValue, onChange }) => {
   const { t } = useTranslation();
   const [value, setValue] = useState<string>(outValue);
+  const inputRef = React.useRef(null);
 
   // 之所以要增加个内部的 value 是为了防止用户输入过快时造成卡顿的问题
   useEffect(() => {
     setValue(outValue);
   }, [outValue]);
 
+  // TODO: antd 的 Input 的 autoFocus 有 BUG，会不生效，等待官方修复后再简化：https://github.com/ant-design/ant-design/issues/41239
+  useEffect(() => {
+    // 1. 组件在第一次渲染时自动 focus，提高用户体验
+    inputRef.current.input.focus();
+
+    // 2. 当组件已经渲染，并再次显示时，自动 focus
+    const observer = new IntersectionObserver((entries) => {
+      if (entries[0].isIntersecting) {
+        inputRef.current.input.focus();
+      }
+    });
+
+    observer.observe(inputRef.current.input);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
   return (
     <div style={{ width: 210 }}>
       <Input
-        autoFocus
+        ref={inputRef}
         allowClear
         style={{ padding: '0 4px 6px' }}
         bordered={false}

packages/plugins/map/src/client/block/MapBlockInitializer.tsx

@@ -9,7 +9,6 @@ import { createMapBlockSchema } from './utils';
 export const MapBlockInitializer = (props) => {
   const { insert } = props;
   const options = useContext(SchemaOptionsContext);
-  console.log('🚀 ~ file: MapBlockInitializer.tsx:12 ~ MapBlockInitializer ~ options:', options);
   const { getCollectionFieldsOptions } = useCollectionManager();
   const { t } = useMapTranslation();