fix(selectinput): tag过多时滚动模式失效

src/_util/useMutationObserver.ts

@@ -0,0 +1,37 @@
+import { useRef, useEffect } from 'react';
+import debounce from 'lodash/debounce';
+
+const DEFAULT_OPTIONS = {
+  debounceTime: 0,
+  config: {
+    attributes: true,
+    childList: true,
+    subtree: true,
+  },
+};
+
+export default function useMutationObservable(targetEl: HTMLElement, cb, options = DEFAULT_OPTIONS) {
+  const observeRef = useRef(null);
+
+  useEffect(() => {
+    if (!cb || typeof cb !== 'function') return;
+    const { debounceTime } = options;
+    observeRef.current = new MutationObserver(debounceTime > 0 ? debounce(cb, debounceTime) : cb);
+  }, [cb, options]);
+
+  useEffect(() => {
+    if (!targetEl) return;
+
+    const { config } = options;
+
+    try {
+      observeRef.current.observe(targetEl, config);
+    } catch (e) {
+      console.error(e);
+    }
+
+    return () => {
+      observeRef.current.disconnect();
+    };
+  }, [targetEl, options]);
+}

src/calendar/Calendar.tsx

@@ -356,6 +356,7 @@ const Calendar: React.FC<CalendarProps> = forwardRef((props, ref: React.MutableR
             <div className={prefixCls([blockName, 'control-section-cell'])}>
               {visibleForYear && (
                 <Select
+                  autoWidth={true}
                   size={controlSectionSize}
                   disabled={disabled}
                   value={year}
@@ -373,6 +374,7 @@ const Calendar: React.FC<CalendarProps> = forwardRef((props, ref: React.MutableR
             <div className={prefixCls([blockName, 'control-section-cell'])}>
               {visibleForMonth && mode === 'month' && (
                 <Select
+                  autoWidth={true}
                   size={controlSectionSize}
                   disabled={disabled}
                   value={month}

src/common.ts

@@ -48,3 +48,7 @@ export interface KeysType {
   value?: string;
   label?: string;
 }
+
+export interface HTMLElementAttributes {
+  [css: string]: string;
+}

src/input/input.md

@@ -13,14 +13,14 @@ autofocus | Boolean | false | 自动聚焦 | N
 autoWidth | Boolean | false | 宽度随内容自适应 | N
 clearable | Boolean | false | 是否可清空 | N
 disabled | Boolean | false | 是否禁用输入框 | N
-format | Function | - | 指定输入框展示值的格式。TS 类型：`(value: InputValue) => number | string` | N
+format | Function | - | 【开发中】指定输入框展示值的格式。TS 类型：`(value: InputValue) => number | string` | N
 label | TNode | - | 左侧文本。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 | N
 maxlength | Number | - | 用户最多可以输入的文本长度，一个中文等于一个计数长度。值小于等于 0 的时候，则表示不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 | N
 name | String | - | 名称 | N
 placeholder | String | undefined | 占位符 | N
 prefixIcon | TElement | - | 组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-readonly | Boolean | false | 输入框是否只读 | N
+readonly | Boolean | false | 只读状态 | N
 showClearIconOnEmpty | Boolean | false | 输入框内容为空时，悬浮状态是否显示清空按钮，默认不显示 | N
 size | String | medium | 输入框尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 status | String | - | 输入框状态。可选项：success/warning/error | N

src/input/type.ts

@@ -39,7 +39,7 @@ export interface TdInputProps {
    */
   disabled?: boolean;
   /**
-   * 指定输入框展示值的格式
+   * 【开发中】指定输入框展示值的格式
    */
   format?: (value: InputValue) => number | string;
   /**
@@ -68,7 +68,7 @@ export interface TdInputProps {
    */
   prefixIcon?: TElement;
   /**
-   * 输入框是否只读
+   * 只读状态
    * @default false
    */
   readonly?: boolean;

src/pagination/Pagination.tsx

@@ -46,6 +46,7 @@ const Pagination: React.FC<PaginationProps> = (props: PaginationProps) => {
     onChange = noop,
     onCurrentChange,
     onPageSizeChange,
+    style = {},
   } = props;
 
   const [locale, t] = useLocaleReceiver('pagination');
@@ -257,7 +258,14 @@ const Pagination: React.FC<PaginationProps> = (props: PaginationProps) => {
       {totalContent && <div className={`${name}__total`}>{renderTotalContent()}</div>}
       {pageSizeOptions instanceof Array && pageSizeOptions.length ? (
         <div className={`${name}__select`}>
-          <Select size={size} value={pageSize} disabled={disabled} onChange={changePageSize}>
+          <Select
+            autoWidth={true}
+            size={size}
+            value={pageSize}
+            disabled={disabled}
+            onChange={changePageSize}
+            style={{ ...style }}
+          >
             {pageSizeOptions.map(
               // eslint-disable-next-line no-confusing-arrow
               (item) =>

src/select-input/select-input.md

@@ -24,8 +24,8 @@ multiple | Boolean | false | 是否为多选模式，默认为单选 | N
 panel | TNode | - | 下拉框内容，可完全自定义。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 placeholder | String | - | 占位符 | N
 popupProps | Object | - | 透传 Popup 浮层组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select-input/type.ts) | N
-popupVisible | Boolean | undefined | 是否显示下拉框，受控属性 | N
-readonly | Boolean | false | 是否只读，值为真会隐藏输入框，且无法打开下拉框 | N
+popupVisible | Boolean | undefined | 是否显示下拉框 | N
+readonly | Boolean | false | 只读状态，值为真会隐藏输入框，且无法打开下拉框 | N
 status | String | - | 输入框状态。可选项：success/warning/error | N
 suffix | TNode | - | 后置图标前的后置内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 suffixIcon | TElement | - | 组件后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N

src/select-input/type.ts

@@ -4,7 +4,8 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { InputProps, InputValue } from '../input';
+import { InputProps } from '../input';
+import { InputValue } from '../input';
 import { PopupProps } from '../popup';
 import { TagInputProps, TagInputValue, TagInputChangeContext } from '../tag-input';
 import { TagProps } from '../tag';
@@ -91,11 +92,11 @@ export interface TdSelectInputProps {
    */
   popupProps?: PopupProps;
   /**
-   * 是否显示下拉框，受控属性
+   * 是否显示下拉框
    */
   popupVisible?: boolean;
   /**
-   * 是否只读，值为真会隐藏输入框，且无法打开下拉框
+   * 只读状态，值为真会隐藏输入框，且无法打开下拉框
    * @default false
    */
   readonly?: boolean;

src/select/base/Select.tsx

@@ -323,6 +323,7 @@ const Select = forwardRefWithStatics(
     return (
       <div className={`${name}__wrap`} style={{ ...style }}>
         <SelectInput
+          autoWidth={!style?.width && props.autoWidth}
           className={name}
           ref={ref}
           allowInput={multiple || filterable}

src/select/select.md

@@ -17,10 +17,10 @@ disabled | Boolean | false | 是否禁用组件 | N
 empty | TNode | '' | 当下拉列表为空时显示的内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 filter | Function | - | 自定义过滤方法，用于对现有数据进行搜索过滤，判断是否过滤某一项数据。TS 类型：`(filterWords: string, option: T) => boolean | Promise<boolean>` | N
 filterable | Boolean | false | 是否可搜索 | N
-inputProps | Object | - | 透传 Input 输入框组件的全部属性。TS 类型：`InputProps`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
-inputValue | String / Number | - | 输入框的值。TS 类型：`InputValue`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
-defaultInputValue | String / Number | - | 输入框的值。非受控属性。TS 类型：`InputValue`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
-keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`SelectKeysType`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
+inputProps | Object | - | 透传 Input 输入框组件的全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
+inputValue | String / Number | - | 输入框的值。TS 类型：`InputValue`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
+defaultInputValue | String / Number | - | 输入框的值。非受控属性。TS 类型：`InputValue`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
+keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`SelectKeysType` `interface SelectKeysType { value?: string; label?: string }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
 loading | Boolean | false | 是否为加载状态 | N
 loadingText | TNode | '' | 远程加载时显示的文字，支持自定义。如加上超链接。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 max | Number | 0 | 用于控制多选数量，值为 0 则不限制 | N
@@ -30,16 +30,18 @@ options | Array | [] | 数据化配置选项内容。TS 类型：`Array<T>` | N
 panelBottomContent | TNode | - | 面板内的底部内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 panelTopContent | TNode | - | 面板内的顶部内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 placeholder | String | undefined | 占位符 | N
-popupProps | Object | - | 透传给 popup 组件的全部属性。TS 类型：`PopupProps`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
+popupProps | Object | - | 透传给 popup 组件的全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
+popupVisible | Boolean | undefined | 是否显示下拉框 | N
 prefixIcon | TElement | - | 组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+readonly | Boolean | false | 只读状态，值为真会隐藏输入框，且无法打开下拉框 | N
 reserveKeyword | Boolean | false | 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 | N
-selectInputProps | Object | - | 【开发中】透传 SelectInput 筛选器输入框组件的全部属性。TS 类型：`SelectInputProps`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
+selectInputProps | Object | - | 【开发中】透传 SelectInput 筛选器输入框组件的全部属性。TS 类型：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
 showArrow | Boolean | true | 是否显示右侧箭头，默认显示 | N
 size | String | medium | 组件尺寸。可选项：small / medium / large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-tagInputProps | Object | - | 【开发中】透传 TagInput 标签输入框组件的全部属性。TS 类型：`TagInputProps`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
-tagProps | Object | - | 【开发中】透传 Tag 标签组件全部属性。TS 类型：`TagProps`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
-value | String / Number / Object / Array | - | 选中值。TS 类型：`SelectValue`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
-defaultValue | String / Number / Object / Array | - | 选中值。非受控属性。TS 类型：`SelectValue`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
+tagInputProps | Object | - | 【开发中】透传 TagInput 标签输入框组件的全部属性。TS 类型：`TagInputProps`，[TagInput API Documents](./tag-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
+tagProps | Object | - | 【开发中】透传 Tag 标签组件全部属性。TS 类型：`TagProps`，[Tag API Documents](./tag?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
+value | String / Number / Object / Array | - | 选中值。TS 类型：`SelectValue` `type SelectValue<T extends SelectOption = SelectOption> = string | number | T | Array<SelectValue<T>>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
+defaultValue | String / Number / Object / Array | - | 选中值。非受控属性。TS 类型：`SelectValue` `type SelectValue<T extends SelectOption = SelectOption> = string | number | T | Array<SelectValue<T>>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts) | N
 valueDisplay | TNode | - | 自定义选中项呈现方式。TS 类型：`string | TNode<{ value: SelectValue; onClose: (index: number, item?: any) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 valueType | String | value | 用于控制选中值的类型。假设数据选项为：`[{ label: '姓名', value: 'name' }]`，value 表示值仅返回数据选项中的 value， object 表示值返回全部数据。。可选项：value/object | N
 onBlur | Function |  | TS 类型：`(context: { value: SelectValue; e: FocusEvent | KeyboardEvent }) => void`<br/>输入框失去焦点时触发 | N
@@ -49,6 +51,7 @@ onCreate | Function |  | TS 类型：`(value: string | number) => void`<br/>当
 onEnter | Function |  | TS 类型：`(context: { inputValue: string; e: KeyboardEvent; value: SelectValue }) => void`<br/>回车键按下时触发。`inputValue` 表示输入框的值，`value` 表示选中值 | N
 onFocus | Function |  | TS 类型：`(context: { value: SelectValue; e: FocusEvent | KeyboardEvent }) => void`<br/>输入框获得焦点时触发 | N
 onInputChange | Function |  | TS 类型：`(value: InputValue, context?: SelectInputValueChangeContext) => void`<br/>输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发、失去焦点等。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts)。<br/>`import { SelectInputValueChangeContext } from '@SelectInput'`<br/> | N
+onPopupVisibleChange | Function |  | TS 类型：`(visible: boolean, context: PopupVisibleChangeContext) => void`<br/>下拉框显示或隐藏时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts)。<br/>`import { PopupVisibleChangeContext } from '@Popup'`<br/> | N
 onRemove | Function |  | TS 类型：`(options: SelectRemoveContext<T>) => void`<br/>多选模式下，选中数据被移除时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/select/type.ts)。<br/>`interface SelectRemoveContext<T> { value: string | number; data: T; e: MouseEvent | KeyboardEvent }`<br/> | N
 onSearch | Function |  | TS 类型：`(filterWords: string) => void`<br/>输入值变化时，触发搜索事件。主要用于远程搜索新数据 | N
 onVisibleChange | Function |  | TS 类型：`(visible: boolean) => void`<br/>下拉框隐藏/显示时触发 | N

src/select/type.ts

@@ -11,6 +11,7 @@ import { SelectInputProps } from '../select-input';
 import { TagInputProps } from '../tag-input';
 import { TagProps } from '../tag';
 import { SelectInputValueChangeContext } from '../select-input';
+import { PopupVisibleChangeContext } from '../popup';
 import { TNode, TElement, SizeEnum } from '../common';
 import { MouseEvent, KeyboardEvent, FocusEvent } from 'react';
 
@@ -125,10 +126,19 @@ export interface TdSelectProps<T extends SelectOption = SelectOption> {
    * 透传给 popup 组件的全部属性
    */
   popupProps?: PopupProps;
+  /**
+   * 是否显示下拉框
+   */
+  popupVisible?: boolean;
   /**
    * 组件前置图标
    */
   prefixIcon?: TElement;
+  /**
+   * 只读状态，值为真会隐藏输入框，且无法打开下拉框
+   * @default false
+   */
+  readonly?: boolean;
   /**
    * 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词
    * @default false
@@ -207,6 +217,10 @@ export interface TdSelectProps<T extends SelectOption = SelectOption> {
    * 输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发、失去焦点等
    */
   onInputChange?: (value: InputValue, context?: SelectInputValueChangeContext) => void;
+  /**
+   * 下拉框显示或隐藏时触发
+   */
+  onPopupVisibleChange?: (visible: boolean, context: PopupVisibleChangeContext) => void;
   /**
    * 多选模式下，选中数据被移除时触发
    */