fix(select): fix select label and prefixIcon display error (#3019)

* fix(select): fix label not display * test(select): add test cases * chore: update snapshot --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Tencent · Jul 31, 2024 · 22634a3 · 22634a3
1 parent 2e93ff6
commit 22634a3
Show file tree

Hide file tree

Showing 12 changed files with 118 additions and 24 deletions.
diff --git a/src/input/__tests__/input.test.tsx b/src/input/__tests__/input.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, fireEvent, vi } from '@test/utils';
+import { render, fireEvent, vi, act } from '@test/utils';
 import userEvent from '@testing-library/user-event';
 import Input from '../Input';
 
@@ -112,4 +112,21 @@ describe('Input 组件测试', () => {
     const { container } = render(<Input placeholder={InputPlaceholder} size="large" />);
     expect(container.firstChild.firstChild.classList.contains('t-size-l')).toBeTruthy();
   });
+  test('label display', async () => {
+    const text = 'test-label';
+    const { getByText } = await render(<Input label={text} />);
+
+    act(() => {
+      expect(getByText(text)).toBeTruthy();
+    });
+  });
+
+  test('prefixIcon display', async () => {
+    const text = 'test-prefixIcon';
+    const { getByText } = await render(<Input prefixIcon={<span>{text}</span>} />);
+
+    act(() => {
+      expect(getByText(text)).toBeTruthy();
+    });
+  });
 });
diff --git a/src/select-input/__tests__/select.test.tsx b/src/select-input/__tests__/select.test.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { render, act } from '@test/utils';
+import SelectInput from '../index';
+
+describe('SelectInput Test', () => {
+  test('label display', async () => {
+    const text = 'test-label';
+    const { getByText } = await render(<SelectInput label={text} />);
+
+    act(() => {
+      expect(getByText(text)).toBeTruthy();
+    });
+  });
+
+  test('prefixIcon display', async () => {
+    const text = 'test-prefixIcon';
+    const { getByText } = await render(<SelectInput prefixIcon={<span>{text}</span>} />);
+
+    act(() => {
+      expect(getByText(text)).toBeTruthy();
+    });
+  });
+});
diff --git a/src/select-input/select-input.en-US.md b/src/select-input/select-input.en-US.md
@@ -28,6 +28,7 @@ placeholder | String | - | placeholder description | N
 popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/select-input/type.ts) | N
 popupVisible | Boolean | - | \- | N
 defaultPopupVisible | Boolean | - | uncontrolled property | N
+prefixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 readonly | Boolean | false | \- | N
 reserveKeyword | Boolean | false | \- | N
 size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N

diff --git a/src/select-input/select-input.md b/src/select-input/select-input.md
@@ -28,6 +28,7 @@ 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 | - | 是否显示下拉框 | N
 defaultPopupVisible | Boolean | - | 是否显示下拉框。非受控属性 | 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
 size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N

diff --git a/src/select-input/type.ts b/src/select-input/type.ts
@@ -107,6 +107,10 @@ export interface TdSelectInputProps {
    * 是否显示下拉框，非受控属性
    */
   defaultPopupVisible?: boolean;
+  /**
+   * 组件前置图标
+   */
+  prefixIcon?: TElement;
   /**
    * 只读状态，值为真会隐藏输入框，且无法打开下拉框
    * @default false

diff --git a/src/select-input/useSingle.tsx b/src/select-input/useSingle.tsx
@@ -28,6 +28,7 @@ const COMMON_PROPERTIES = [
   'onMouseenter',
   'onMouseleave',
   'size',
+  'prefixIcon',
 ];
 
 const DEFAULT_KEYS: TdSelectInputProps['keys'] = {

diff --git a/src/select/__tests__/select.test.tsx b/src/select/__tests__/select.test.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable */
-import { render, fireEvent, mockTimeout } from '@test/utils';
+import { render, fireEvent, mockTimeout, act } from '@test/utils';
 import React, { useState } from 'react';
 import userEvent from '@testing-library/user-event';
 
@@ -52,7 +52,7 @@ describe('Select 组件测试', () => {
       setLoading(true);
       setTimeout(() => {
         setLoading(false);
-        let options = [];
+        let options: typeof defaultOptions = [];
         if (search) {
           options = [
             {
@@ -314,4 +314,22 @@ describe('Select 组件测试', () => {
     await mockTimeout(() => expect(document.querySelector(selectSelector)).toHaveTextContent('123_test1'));
     await mockTimeout(() => expect(document.querySelector(selectSelector)).toHaveTextContent('123_test2'));
   });
+
+  test('label display', async () => {
+    const text = 'test-label';
+    const { getByText } = await render(<Select options={[]} label={text} />);
+
+    act(() => {
+      expect(getByText(text)).toBeTruthy();
+    });
+  });
+
+  test('prefixIcon display', async () => {
+    const text = 'test-prefixIcon';
+    const { getByText } = await render(<Select options={[]} prefixIcon={<span>{text}</span>} />);
+
+    act(() => {
+      expect(getByText(text)).toBeTruthy();
+    });
+  });
 });
diff --git a/src/select/base/Select.tsx b/src/select/base/Select.tsx
@@ -57,7 +57,6 @@ const Select = forwardRefWithStatics(
       borderless,
       autoWidth,
       creatable,
-      filter,
       loadingText = emptyText,
       max,
       popupProps,
@@ -73,20 +72,13 @@ const Select = forwardRefWithStatics(
       options,
       filterable,
       loading,
-      onFocus,
-      onBlur,
-      onClear = noop,
-      onCreate,
-      onRemove,
-      onSearch,
       empty,
       valueType,
       keys,
       children,
       collapsedItems,
       minCollapsedNum,
       valueDisplay,
-      onEnter,
       showArrow,
       inputProps,
       panelBottomContent,
@@ -96,6 +88,15 @@ const Select = forwardRefWithStatics(
       tagProps,
       scroll,
       suffixIcon,
+      label,
+      filter,
+      onFocus,
+      onBlur,
+      onClear = noop,
+      onCreate,
+      onRemove,
+      onSearch,
+      onEnter,
       onPopupVisibleChange,
     } = props;
 
@@ -434,8 +435,9 @@ const Select = forwardRefWithStatics(
           status={props.status}
           tips={props.tips}
           borderless={borderless}
-          label={prefixIcon}
+          label={label}
           suffix={props.suffix}
+          prefixIcon={prefixIcon}
           suffixIcon={renderSuffixIcon()}
           panel={renderContent()}
           placeholder={!multiple && showPopup && selectedLabel ? selectedLabel : placeholder || t(local.placeholder)}

diff --git a/src/tag-input/TagInput.tsx b/src/tag-input/TagInput.tsx
@@ -40,6 +40,7 @@ const TagInput = forwardRef<InputRef, TagInputProps>((originalProps, ref) => {
     status,
     suffixIcon,
     suffix,
+    prefixIcon,
     onClick,
     onPaste,
     onFocus,
@@ -154,6 +155,7 @@ const TagInput = forwardRef<InputRef, TagInputProps>((originalProps, ref) => {
       status={status}
       placeholder={tagInputPlaceholder}
       suffix={suffix}
+      prefixIcon={prefixIcon}
       suffixIcon={suffixIconNode}
       showInput={!inputProps?.readonly || !tagValue || !tagValue?.length}
       keepWrapperWidth={!autoWidth}

diff --git a/src/tag-input/__tests__/tag-input.test.tsx b/src/tag-input/__tests__/tag-input.test.tsx
@@ -1,5 +1,6 @@
-import { fireEvent, vi } from '@test/utils';
-import { TagInput } from '..';
+import React from 'react';
+import { fireEvent, vi, render, act } from '@test/utils';
+import { TagInput } from '../index';
 import { getTagInputValueMount } from './mount';
 
 describe('TagInput Component', () => {
@@ -38,4 +39,22 @@ describe('TagInput Component', () => {
     // expect(onDragSort.mock.calls[0][0].target).toEqual('Vue');
     // expect(container.querySelectorAll('.t-tag').item(0).firstChild.title).toEqual('React');
   });
+
+  test('label display', async () => {
+    const text = 'test-label';
+    const { getByText } = await render(<TagInput label={text} />);
+
+    act(() => {
+      expect(getByText(text)).toBeTruthy();
+    });
+  });
+
+  test('prefixIcon display', async () => {
+    const text = 'test-prefixIcon';
+    const { getByText } = await render(<TagInput prefixIcon={<span>{text}</span>} />);
+
+    act(() => {
+      expect(getByText(text)).toBeTruthy();
+    });
+  });
 });