fix: dropdownMatchSelectWidth=false (#2143)

packages/core/client/src/acl/Configuration/StrategyActions.tsx

@@ -84,6 +84,7 @@ export const StrategyActions = connect((props) => {
             render: (scope, action) =>
               !action.onNewRecord && (
                 <Select
+                  dropdownMatchSelectWidth={false}
                   size={'small'}
                   value={scope}
                   options={[

packages/core/client/src/collection-manager/Configuration/components/index.tsx

@@ -45,6 +45,7 @@ export const ThroughForeignKey = observer(
       <div>
         <Select
           allowClear
+          dropdownMatchSelectWidth={false}
           placeholder={'留空时，自动生成 FK 字段'}
           disabled={field.disabled}
           value={field.value}
@@ -72,6 +73,7 @@ export const TargetForeignKey = observer(
       <div>
         <Select
           allowClear
+          dropdownMatchSelectWidth={false}
           placeholder={'留空时，自动生成 FK 字段'}
           disabled={field.disabled}
           value={field.value}
@@ -100,6 +102,7 @@ export const SourceCollection = observer(
       <div>
         <Select
           disabled
+          dropdownMatchSelectWidth={false}
           value={collection.name}
           options={[{ value: collection.name, label: compile(collection.title) }]}
         />

packages/core/client/src/collection-manager/templates/components/PreviewFields.tsx

@@ -123,6 +123,7 @@ const PreviewCom = (props) => {
         ) : (
           <Select
             defaultValue={text}
+            dropdownMatchSelectWidth={false}
             style={{ width: '100%' }}
             options={
               item?.possibleTypes.map((v) => {
@@ -148,6 +149,7 @@ const PreviewCom = (props) => {
           <Select
             defaultValue={text}
             style={{ width: '100%' }}
+            dropdownMatchSelectWidth={false}
             onChange={(value) => {
               const interfaceConfig = getInterface(value);
               handleFieldChange({ ...item, interface: value, uiSchema: interfaceConfig?.default?.uiSchema }, index);

packages/core/client/src/schema-component/antd/association-field/InternalPicker.tsx

@@ -1,4 +1,4 @@
-import { RecursionField, observer, useField, useFieldSchema } from '@formily/react';
+import { observer, RecursionField, useField, useFieldSchema } from '@formily/react';
 import { Input, Select } from 'antd';
 import { differenceBy, unionBy } from 'lodash';
 import React, { useContext, useMemo, useState } from 'react';
@@ -133,6 +133,7 @@ export const InternalPicker = observer(
           <div style={{ width: '100%' }}>
             <Select
               style={{ width: '100%' }}
+              dropdownMatchSelectWidth={false}
               {...others}
               mode={multiple ? 'multiple' : props.mode}
               fieldNames={fieldNames}

packages/core/client/src/schema-component/antd/calendar/ViewSelect.tsx

@@ -15,7 +15,7 @@ export const ViewSelect = observer(
     } = useContext(CalendarToolbarContext);
     return (
       <div className="ant-btn-group">
-        <Select value={view} onChange={onView}>
+        <Select dropdownMatchSelectWidth={false} value={view} onChange={onView}>
           {views.map((name) => (
             <Select.Option key={name} value={name}>
               {messages[name]}

packages/core/client/src/schema-component/antd/collection-select/CollectionSelect.tsx

@@ -31,6 +31,7 @@ export const CollectionSelect = connect(
     return (
       <Select
         placeholder={t('Select collection')}
+        dropdownMatchSelectWidth={false}
         {...others}
         showSearch
         filterOption={(input, option) => (option?.label ?? '').includes(input)}
@@ -39,7 +40,8 @@ export const CollectionSelect = connect(
     );
   },
   mapReadPretty(
-    observer((props: CollectionSelectProps) => {
+    observer(
+      (props: CollectionSelectProps) => {
         const { mode } = props;
         const compile = useCompile();
         const options = useOptions(props).filter((option) => {
@@ -58,6 +60,8 @@ export const CollectionSelect = connect(
             ))}
           </div>
         );
-    }, { displayName: 'CollectionSelectObserver' }),
+      },
+      { displayName: 'CollectionSelectObserver' },
+    ),
   ),
 );

packages/core/client/src/schema-component/antd/cron/CronSet.tsx

@@ -1,10 +1,10 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { Select, SelectProps } from 'antd';
-import Cron from './Cron';
 import { connect, mapReadPretty, useFieldSchema } from '@formily/react';
+import { Select, SelectProps } from 'antd';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useCollection } from '../../../collection-manager';
 import { useCompile } from '../../hooks';
 import { EllipsisWithTooltip } from '../input';
+import Cron from './Cron';
 
 interface CronSetProps extends SelectProps {
   onChange: (v: string) => void;
@@ -63,7 +63,14 @@ const CronSetInternal = (props: CronSetProps) => {
 
   return (
     <fieldset>
-      <Select allowClear {...props} value={value} options={options} onChange={(value) => onCronChange(value)}></Select>
+      <Select
+        dropdownMatchSelectWidth={false}
+        allowClear
+        {...props}
+        value={value}
+        options={options}
+        onChange={(value) => onCronChange(value)}
+      ></Select>
       {isCustomize ? (
         <Cron
           value={value}

packages/core/client/src/schema-component/antd/filter/FilterGroup.tsx

@@ -4,8 +4,8 @@ import { ArrayField, connect, useField } from '@formily/react';
 import { Select, Space } from 'antd';
 import React, { useContext } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { FilterLogicContext, RemoveConditionContext } from './context';
 import { FilterItems } from './FilterItems';
+import { FilterLogicContext, RemoveConditionContext } from './context';
 
 export const FilterGroup = connect((props) => {
   const { bordered = true, disabled } = props;

packages/core/client/src/schema-component/antd/filter/FilterItem.tsx

@@ -40,6 +40,7 @@ export const FilterItem = observer(
             className={css`
               min-width: 110px;
             `}
+            dropdownMatchSelectWidth={false}
             value={operator?.value}
             options={compile(operators)}
             onChange={(value) => {

packages/core/client/src/schema-component/antd/form-v2/Templates.tsx

@@ -143,6 +143,7 @@ export const Templates = ({ style = {}, form }) => {
         {t('Data template')}:{' '}
       </label>
       <Select
+        dropdownMatchSelectWidth={false}
         // style={{ width: '8em' }}
         options={templates}
         fieldNames={{ label: 'title', value: 'key' }}

packages/core/client/src/schema-component/antd/record-picker/InputRecordPicker.tsx

@@ -178,6 +178,7 @@ export const InputRecordPicker: React.FC<any> = (props: IRecordPickerProps) => {
           {...others}
           mode={multiple ? 'multiple' : props.mode}
           fieldNames={fieldNames}
+          dropdownMatchSelectWidth={false}
           onDropdownVisibleChange={(open) => {
             setVisible(true);
           }}

packages/core/client/src/schema-component/antd/variable/Input.tsx

@@ -1,14 +1,12 @@
 import { CloseCircleFilled } from '@ant-design/icons';
 import { css, cx } from '@emotion/css';
 import { useForm } from '@formily/react';
-import { Input as AntInput, Cascader, DatePicker, InputNumber, Select, Tag } from 'antd';
-import moment from 'moment';
-import React, { useCallback, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-
 import { error } from '@nocobase/utils/client';
+import { Input as AntInput, Cascader, DatePicker, InputNumber, Select, Tag } from 'antd';
 import classNames from 'classnames';
-import { useMemo } from 'react';
+import moment from 'moment';
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useCompile } from '../..';
 import { Option } from '../../../schema-settings/VariableInput/type';
 import { XButton } from './XButton';

packages/core/client/src/schema-initializer/components/assigned-field/AssignedField.tsx

@@ -181,7 +181,13 @@ export const AssignedField = (props: any) => {
       return <CollectionField {...props} value={value} onChange={valueChangeHandler} style={{ minWidth: 150 }} />;
     } else {
       return (
-        <Select defaultValue={fieldType} value={fieldType} style={{ minWidth: 150 }} onChange={fieldTypeChangeHandler}>
+        <Select
+          dropdownMatchSelectWidth={false}
+          defaultValue={fieldType}
+          value={fieldType}
+          style={{ minWidth: 150 }}
+          onChange={fieldTypeChangeHandler}
+        >
           {options?.map((opt) => {
             return (
               <Select.Option key={opt.name} value={opt.name}>

packages/core/client/src/schema-settings/DataTemplates/components/Designer.tsx

@@ -172,6 +172,7 @@ function SelectItem(props) {
       <div style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
         {title}
         <Select
+          dropdownMatchSelectWidth={false}
           bordered={false}
           value={value}
           onChange={onChange}

packages/core/client/src/schema-settings/LinkageRules/LinkageRuleAction.tsx

@@ -72,6 +72,7 @@ export const FormFieldLinkageRuleAction = observer(
               placeholder={t('Select field')}
             />
             <Select
+              dropdownMatchSelectWidth={false}
               value={operator}
               className={css`
                 min-width: 120px;
@@ -121,6 +122,7 @@ export const FormButtonLinkageRuleAction = observer(
       <div style={{ marginBottom: 8 }}>
         <Space>
           <Select
+            dropdownMatchSelectWidth={false}
             value={operator}
             options={compile(operators)}
             onChange={(value) => {

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

@@ -27,6 +27,7 @@ export const useLanguageSettings = () => {
         >
           {t('Language')}{' '}
           <Select
+            dropdownMatchSelectWidth={false}
             style={{ minWidth: 100 }}
             bordered={false}
             open={open}

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

@@ -45,6 +45,7 @@ export const useSwitchRole = () => {
           <Select
             style={{ minWidth: 100 }}
             bordered={false}
+            dropdownMatchSelectWidth={false}
             fieldNames={{
               label: 'title',
               value: 'name',

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

@@ -25,6 +25,7 @@ export const useThemeSettings = () => {
           <Select
             style={{ minWidth: 100 }}
             bordered={false}
+            dropdownMatchSelectWidth={false}
             defaultValue={localStorage.getItem('NOCOBASE_THEME')}
             options={[
               { label: t('Default theme'), value: 'default' },

packages/plugins/graph-collection-manager/src/client/GraphDrawPage.tsx

@@ -1018,7 +1018,9 @@ export const GraphDrawPage = React.memo(() => {
             <div className={cx(collectionListClass)}>
               <SchemaComponent
                 components={{
-                  Select: (props) => <Select {...props} getPopupContainer={getPopupContainer} />,
+                  Select: (props) => (
+                    <Select dropdownMatchSelectWidth={false} {...props} getPopupContainer={getPopupContainer} />
+                  ),
                   AddCollectionAction,
                 }}
                 schema={{

packages/plugins/graph-collection-manager/src/client/action-hooks.tsx

@@ -1,14 +1,14 @@
 import { observer, useForm } from '@formily/react';
 import { action } from '@formily/reactive';
 import {
-  useActionContext,
   useAPIClient,
+  useActionContext,
   useCollectionFieldFormValues,
   useCollectionManager,
   useCompile,
   useRequest,
 } from '@nocobase/client';
-import { message, Select } from 'antd';
+import { Select, message } from 'antd';
 import omit from 'lodash/omit';
 import React, { useContext, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -34,7 +34,12 @@ export const SourceCollection = observer(
     const compile = useCompile();
     return (
       <div>
-        <Select disabled value={record.name} options={[{ value: record.name, label: compile(record.title) }]} />
+        <Select
+          dropdownMatchSelectWidth={false}
+          disabled
+          value={record.name}
+          options={[{ value: record.name, label: compile(record.title) }]}
+        />
       </div>
     );
   },

packages/plugins/graph-collection-manager/src/client/components/Entity.tsx

@@ -243,7 +243,9 @@ const PortsCom = React.memo<any>(({ targetGraph, collectionData, setTargetNode,
             Input,
             Form,
             ResourceActionProvider,
-            Select: (props) => <Select {...props} getPopupContainer={getPopupContainer} />,
+            Select: (props) => (
+              <Select dropdownMatchSelectWidth={false} {...props} getPopupContainer={getPopupContainer} />
+            ),
             Checkbox,
             Radio,
             InputNumber,

packages/plugins/map/src/client/components/Search.tsx

@@ -85,6 +85,7 @@ const Search = (props: SearchProps) => {
         onSearch={onSearch}
         onSelect={onSelect}
         options={options}
+        dropdownMatchSelectWidth={false}
       ></Select>
     </div>
   );

packages/plugins/multi-app-share-collection/src/client/TableTransfer.tsx

@@ -225,6 +225,7 @@ export const TableTransfer = connect((props) => {
             <strong style={{ fontSize: 16 }}>{t('Unshared collections')}</strong>
             <Input.Group compact style={{ width: 360 }}>
               <Select
+                dropdownMatchSelectWidth={false}
                 onChange={(value) => {
                   removedDataSource.setCategoryFilter(value);
                 }}
@@ -309,6 +310,7 @@ export const TableTransfer = connect((props) => {
             <strong style={{ fontSize: 16 }}>{t('Shared collections')}</strong>
             <Input.Group compact style={{ width: 360 }}>
               <Select
+                dropdownMatchSelectWidth={false}
                 onChange={(value) => {
                   addedDataSource.setCategoryFilter(value);
                 }}

packages/plugins/sequence-field/src/client/sequence.tsx

@@ -1,21 +1,19 @@
 import { css } from '@emotion/css';
 import { ArrayTable, FormButtonGroup, FormDrawer, FormLayout, Submit } from '@formily/antd';
 import { onFieldValueChange } from '@formily/core';
-import { SchemaOptionsContext, useForm, useFormEffects, ISchema } from '@formily/react';
+import { ISchema, SchemaOptionsContext, useForm, useFormEffects } from '@formily/react';
+import {
+  Cron,
+  IField,
+  SchemaComponent,
+  SchemaComponentOptions,
+  interfacesProperties,
+  useCompile,
+} from '@nocobase/client';
 import { Button, Select } from 'antd';
 import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-
+import { NAMESPACE, lang } from './locale';
-import {
-  Cron,
-  SchemaComponent,
-  SchemaComponentOptions,
-  useCompile,
-  interfacesProperties,
-  IField,
-  useCollectionField,
-} from '@nocobase/client';
-import { lang, NAMESPACE } from './locale';
 
 function RuleTypeSelect(props) {
   const compile = useCompile();
@@ -30,7 +28,7 @@ function RuleTypeSelect(props) {
   });
 
   return (
-    <Select {...props}>
+    <Select dropdownMatchSelectWidth={false} {...props}>
       {Object.keys(RuleTypes).map((key) => (
         <Select.Option key={key} value={key}>
           {compile(RuleTypes[key].title)}

packages/plugins/snapshot-field/src/client/components/SnapshotOwnerCollectionFieldsSelect.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import { Select, SelectProps } from 'antd';
-import { useTopRecord } from '../interface';
 import { useCollectionManager, useCompile } from '@nocobase/client';
+import { Select, SelectProps } from 'antd';
+import React from 'react';
+import { useTopRecord } from '../interface';
 
 export type SnapshotOwnerCollectionFieldsSelectProps = Omit<SelectProps, 'options'>;
 
@@ -18,5 +18,5 @@ export const useSnapshotOwnerCollectionFields = () => {
 
 export const SnapshotOwnerCollectionFieldsSelect: React.FC<SnapshotOwnerCollectionFieldsSelectProps> = (props) => {
   const options = useSnapshotOwnerCollectionFields();
-  return <Select options={options} {...props} />;
+  return <Select dropdownMatchSelectWidth={false} options={options} {...props} />;
 };

packages/plugins/workflow/src/client/components/Duration.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { InputNumber, Select } from 'antd';
 import { css } from '@emotion/css';
+import { InputNumber, Select } from 'antd';
+import React from 'react';
 import { lang } from '../locale';
 
 const UnitOptions = [
@@ -29,7 +29,11 @@ export default function ({ value = 60000, onChange }) {
       `}
     >
       <InputNumber min={1} value={quantity} onChange={(v) => onChange(Math.round(v * option.value))} />
-      <Select value={option.value} onChange={(unit) => onChange(Math.round(quantity * unit))}>
+      <Select
+        dropdownMatchSelectWidth={false}
+        value={option.value}
+        onChange={(unit) => onChange(Math.round(quantity * unit))}
+      >
         {UnitOptions.map((item) => (
           <Select.Option key={item.value} value={item.value}>
             {lang(item.label)}

packages/plugins/workflow/src/client/triggers/schedule/DateFieldsSelect.tsx

@@ -1,10 +1,9 @@
 import { observer, useForm } from '@formily/react';
+import { useCollectionManager, useCompile } from '@nocobase/client';
 import { Select } from 'antd';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useCollectionManager, useCompile } from '@nocobase/client';
-
 export const DateFieldsSelect: React.FC<any> = observer(
   (props) => {
     const { t } = useTranslation();
@@ -14,7 +13,7 @@ export const DateFieldsSelect: React.FC<any> = observer(
     const fields = getCollectionFields(values?.collection);
 
     return (
-      <Select placeholder={t('Select field')} {...props}>
+      <Select dropdownMatchSelectWidth={false} placeholder={t('Select field')} {...props}>
         {fields
           .filter((field) => !field.hidden && (field.uiSchema ? field.type === 'date' : false))
           .map((field) => (