fix: select item can not be selected in connecting data blocks (#2993)

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

@@ -725,7 +725,6 @@ SchemaSettings.ConnectDataBlocks = function ConnectDataBlocks(props: {
           });
           dn.refresh();
         }}
-        onClick={(e) => e.stopPropagation()}
         onMouseEnter={onHover}
         onMouseLeave={onLeave}
       />
@@ -750,11 +749,11 @@ SchemaSettings.ConnectDataBlocks = function ConnectDataBlocks(props: {
 };
 
 SchemaSettings.SelectItem = function SelectItem(props) {
-  const { title, name, options, value, onChange, onClick, ...others } = props;
+  const { title, name, options, value, onChange, ...others } = props;
 
   return (
     <SchemaSettings.Item name={name} title={title} role="none" aria-label="" {...others}>
-      <SelectWithTitle {...{ name, title, defaultValue: value, onChange, options, onClick }} />
+      <SelectWithTitle {...{ name, title, defaultValue: value, onChange, options }} />
     </SchemaSettings.Item>
   );
 };
@@ -1963,20 +1962,18 @@ export const isPatternDisabled = (fieldSchema: Schema) => {
   return fieldSchema?.['x-component-props']?.['pattern-disable'] == true;
 };
 
-function SelectWithTitle({
+export function SelectWithTitle({
   name,
   title,
   defaultValue,
   onChange,
   options,
-  onClick,
 }: {
   name?: string;
   title?: any;
   defaultValue?: any;
   options?: any;
   onChange?: (...args: any[]) => void;
-  onClick?: (...args: any[]) => void;
 }) {
   const [open, setOpen] = useState(false);
   const timerRef = useRef<any>(null);
@@ -1986,7 +1983,10 @@ function SelectWithTitle({
       role="button"
       aria-label={name || title}
       style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}
-      onClick={() => setOpen((v) => !v)}
+      onClick={(e) => {
+        e.stopPropagation();
+        setOpen((v) => !v);
+      }}
       onMouseLeave={() => {
         timerRef.current = setTimeout(() => {
           setOpen(false);
@@ -2002,7 +2002,6 @@ function SelectWithTitle({
         onChange={onChange}
         options={options}
         style={{ textAlign: 'right', minWidth: 100 }}
-        onClick={onClick}
         onMouseEnter={() => {
           clearTimeout(timerRef.current);
         }}

packages/core/client/src/user/LanguageSettings.tsx

@@ -1,66 +1,45 @@
-import { MenuProps, Select } from 'antd';
-import React, { useMemo, useState } from 'react';
+import { MenuProps } from 'antd';
+import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useAPIClient, useSystemSettings } from '..';
+import { SelectWithTitle, useAPIClient, useSystemSettings } from '..';
 import locale from '../locale';
 
 export const useLanguageSettings = () => {
   const { t, i18n } = useTranslation();
-  const [open, setOpen] = useState(false);
   const api = useAPIClient();
   const { data } = useSystemSettings();
-  const enabledLanguages: string[] = data?.data?.enabledLanguages || [];
+  const enabledLanguages: string[] = useMemo(() => data?.data?.enabledLanguages || [], [data?.data?.enabledLanguages]);
   const result = useMemo<MenuProps['items'][0]>(() => {
     return {
       role: 'button',
       key: 'language',
       eventKey: 'LanguageSettings',
-      onClick: () => {
-        setOpen(true);
-      },
       label: (
-        <div
-          aria-label="language-settings"
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
+        <SelectWithTitle
+          title={t('Language')}
+          options={Object.keys(locale)
+            .filter((lang) => enabledLanguages.includes(lang))
+            .map((lang) => {
+              return {
+                label: locale[lang].label,
+                value: lang,
+              };
+            })}
+          defaultValue={i18n.language}
+          onChange={async (lang) => {
+            await api.resource('users').updateProfile({
+              values: {
+                appLang: lang,
+              },
+            });
+            api.auth.setLocale(lang);
+            await i18n.changeLanguage(lang);
+            window.location.reload();
           }}
-        >
-          {t('Language')}{' '}
-          <Select
-            data-testid="select-language"
-            popupMatchSelectWidth={false}
-            style={{ minWidth: 100 }}
-            bordered={false}
-            open={open}
-            onDropdownVisibleChange={(open) => {
-              setOpen(open);
-            }}
-            options={Object.keys(locale)
-              .filter((lang) => enabledLanguages.includes(lang))
-              .map((lang) => {
-                return {
-                  label: locale[lang].label,
-                  value: lang,
-                };
-              })}
-            value={i18n.language}
-            onChange={async (lang) => {
-              await api.resource('users').updateProfile({
-                values: {
-                  appLang: lang,
-                },
-              });
-              api.auth.setLocale(lang);
-              await i18n.changeLanguage(lang);
-              window.location.reload();
-            }}
-          />
-        </div>
+        />
       ),
     };
-  }, [enabledLanguages, i18n, open]);
+  }, [api, enabledLanguages, i18n, t]);
 
   if (enabledLanguages.length < 2) {
     return null;

packages/plugins/@nocobase/plugin-theme-editor/src/client/hooks/useThemeSettings.tsx

@@ -1,6 +1,6 @@
-import { useAPIClient, useCurrentUserContext, useSystemSettings } from '@nocobase/client';
+import { SelectWithTitle, useAPIClient, useCurrentUserContext, useSystemSettings } from '@nocobase/client';
 import { error } from '@nocobase/utils/client';
-import { MenuProps, Select } from 'antd';
+import { MenuProps } from 'antd';
 import React, { useEffect, useMemo } from 'react';
 import { useCurrentThemeId } from '../components/InitializeTheme';
 import { useThemeListContext } from '../components/ThemeListProvider';
@@ -77,24 +77,13 @@ function Label() {
   }
 
   return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
+    <SelectWithTitle
+      title={t('Theme')}
+      options={options}
+      defaultValue={currentThemeId}
+      onChange={(value) => {
+        updateUserThemeSettings(value);
       }}
-    >
-      {t('Theme')}
-      <Select
-        style={{ minWidth: 100 }}
-        bordered={false}
-        popupMatchSelectWidth={false}
-        value={currentThemeId}
-        options={options}
-        onChange={(value) => {
-          updateUserThemeSettings(value);
-        }}
-      />
-    </div>
+    />
   );
 }