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,42 +1,22 @@
-import { MenuProps, Select } from 'antd';
+import { MenuProps } from 'antd';
-import React, { useMemo, useState } from 'react';
+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
+        <SelectWithTitle
-          aria-label="language-settings"
+          title={t('Language')}
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          }}
-        >
-          {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) => {
@@ -45,7 +25,7 @@ export const useLanguageSettings = () => {
                 value: lang,
               };
             })}
-            value={i18n.language}
+          defaultValue={i18n.language}
           onChange={async (lang) => {
             await api.resource('users').updateProfile({
               values: {
@@ -57,10 +37,9 @@ export const useLanguageSettings = () => {
             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
+    <SelectWithTitle
-      style={{
+      title={t('Theme')}
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-      }}
-    >
-      {t('Theme')}
-      <Select
-        style={{ minWidth: 100 }}
-        bordered={false}
-        popupMatchSelectWidth={false}
-        value={currentThemeId}
       options={options}
+      defaultValue={currentThemeId}
       onChange={(value) => {
         updateUserThemeSettings(value);
       }}
     />
-    </div>
   );
 }