fix: should only show one scroll bar in drop-down menu (#2231)

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

@@ -1,4 +1,3 @@
-import { css } from '@emotion/css';
 import { ISchema, observer, useForm } from '@formily/react';
 import { error, isString } from '@nocobase/utils/client';
 import { Button, Dropdown, MenuProps, Switch } from 'antd';
@@ -17,13 +16,6 @@ import {
   SchemaInitializerItemProps,
 } from './types';
 
-const overlayClassName = css`
-  .ant-dropdown-menu-item-group-list {
-    max-height: 40vh;
-    overflow: auto;
-  }
-`;
-
 const defaultWrap = (s: ISchema) => s;
 
 export const SchemaInitializerItemContext = createContext(null);
@@ -156,7 +148,7 @@ SchemaInitializer.Button = observer(
                 key: item.key || `item-group-${indexA}`,
                 label,
                 title: label,
-                popupClassName: styles.nbMenuItemGroup,
+                popupClassName: styles.nbMenuItemSubMenu,
                 children: renderItems(item.children),
               }
             );
@@ -175,7 +167,6 @@ SchemaInitializer.Button = observer(
         <Dropdown
           className={classNames('nb-schema-initializer-button')}
           openClassName={`nb-schema-initializer-button-open`}
-          overlayClassName={classNames('nb-schema-initializer-button-overlay', overlayClassName)}
           open={visible}
           onOpenChange={(open) => {
             // 如果不清空输入框的值，那么下次打开的时候会出现上次输入的值
@@ -184,7 +175,7 @@ SchemaInitializer.Button = observer(
           }}
           menu={{
             style: {
-              maxHeight: '60vh',
+              maxHeight: '50vh',
               overflowY: 'auto',
             },
             items: menuItems.current,

packages/core/client/src/schema-initializer/style.ts

@@ -5,6 +5,11 @@ export const useStyles = createStyles(({ token }) => {
     nbMenuItemGroup: {
       maxHeight: '50vh',
       overflowY: 'auto',
+    },
+
+    nbMenuItemSubMenu: {
+      maxHeight: '50vh',
+      overflowY: 'auto',
       boxShadow: token.boxShadowSecondary,
       borderRadius: token.borderRadiusLG,
     },

packages/core/client/src/schema-settings/SchemaSettings.tsx

@@ -1,4 +1,3 @@
-import { css } from '@emotion/css';
 import { ArrayCollapse, ArrayItems, FormDialog, FormItem, FormLayout, Input } from '@formily/antd-v5';
 import { Field, GeneralField, createForm } from '@formily/core';
 import { ISchema, Schema, SchemaOptionsContext, useField, useFieldSchema, useForm } from '@formily/react';
@@ -18,7 +17,6 @@ import {
   Space,
   Switch,
 } from 'antd';
-import classNames from 'classnames';
 import _, { cloneDeep } from 'lodash';
 import React, {
   ReactNode,
@@ -131,16 +129,6 @@ export const SchemaSettingsProvider: React.FC<SchemaSettingsProviderProps> = (pr
   );
 };
 
-const overlayClassName = classNames(
-  'nb-schema-initializer-button-overlay',
-  css`
-    .ant-dropdown-menu-item-group-list {
-      max-height: 40vh;
-      overflow: auto;
-    }
-  `,
-);
-
 export const SchemaSettings: React.FC<SchemaSettingsProps> & SchemaSettingsNested = (props) => {
   const { title, dn, ...others } = props;
   const [visible, setVisible] = useState(false);
@@ -165,7 +153,6 @@ export const SchemaSettings: React.FC<SchemaSettingsProps> & SchemaSettingsNeste
           changeMenu(open);
         }}
         menu={{ items }}
-        overlayClassName={overlayClassName}
       >
         {typeof title === 'string' ? <span>{title}</span> : title}
       </Dropdown>