fix(select): improve select component behavior and trigger handling

Tencent · Feb 28, 2025 · 0730e07 · 0730e07
1 parent 9a0b6ac
commit 0730e07
Show file tree

Hide file tree

Showing 6 changed files with 256 additions and 32 deletions.
diff --git a/src/input/Input.tsx b/src/input/Input.tsx
@@ -217,7 +217,7 @@ const Input = forwardRefWithStatics(
         ref={inputRef}
         placeholder={placeholder}
         type={renderType}
-        className={`${classPrefix}-input__inner`}
+        className={`${classPrefix}-input__inner${showInput ? '' : ` ${classPrefix}-input--soft-hidden`}`}
         value={formatDisplayValue}
         readOnly={readonly}
         disabled={disabled}
@@ -261,7 +261,7 @@ const Input = forwardRefWithStatics(
       >
         {prefixIconContent}
         {labelContent ? <div className={`${classPrefix}-input__prefix`}>{labelContent}</div> : null}
-        {showInput && renderInput}
+        {renderInput}
         {autoWidth && (
           <span ref={inputPreRef} className={`${classPrefix}-input__input-pre`}>
             {innerValue || placeholder}

diff --git a/src/select/base/Option.tsx b/src/select/base/Option.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo } from 'react';
 import classNames from 'classnames';
-import { isNumber , isString , get } from 'lodash-es';
+import { isNumber, isString, get } from 'lodash-es';
 
 import useConfig from '../../hooks/useConfig';
 import useDomRefCallback from '../../hooks/useDomRefCallback';

diff --git a/src/select/base/PopupContent.tsx b/src/select/base/PopupContent.tsx
@@ -1,5 +1,6 @@
 import React, { Children, isValidElement, cloneElement, useRef, CSSProperties } from 'react';
 import classNames from 'classnames';
+import { isEqual } from 'lodash-es';
 import { useLocaleReceiver } from '../../locale/LocalReceiver';
 import { getSelectValueArr } from '../util/helper';
 import { TdSelectProps, SelectValue, TdOptionProps, SelectValueChangeTrigger, SelectOption } from '../type';
@@ -107,15 +108,18 @@ const PopupContent = React.forwardRef<HTMLDivElement, SelectPopupProps>((props,
     if (!Object.keys(objVal).length) {
       Object.assign(objVal, { [keys?.label || 'label']: label, [keys?.value || 'value']: selectedValue });
     }
+
     if (multiple) {
       // calc multiple select values
       const values = getSelectValueArr(value, selectedValue, selected, valueType, keys, objVal);
-      onChange(values, { label, value: selectedValue, e: event, trigger: 'check' });
+      onChange(values, { label, value: selectedValue, e: event, trigger: selected ? 'uncheck' : 'check' });
     } else {
       // calc single select value
       const selectVal = valueType === 'object' ? objVal : selectedValue;
 
-      onChange(selectVal, { label, value: selectVal, e: event, trigger: 'check' });
+      if (!isEqual(value, selectVal)) {
+        onChange(selectVal, { label, value: selectVal, e: event, trigger: 'check' });
+      }
       setShowPopup(!showPopup);
     }
   };

diff --git a/src/select/base/Select.tsx b/src/select/base/Select.tsx
@@ -11,7 +11,7 @@ import React, {
   useState,
 } from 'react';
 import classNames from 'classnames';
-import { isFunction , get , debounce } from 'lodash-es';
+import { isFunction, get, debounce } from 'lodash-es';
 import { getOffsetTopToContainer } from '../../_util/helper';
 import useControlled from '../../hooks/useControlled';
 import { useLocaleReceiver } from '../../locale/LocalReceiver';
@@ -160,12 +160,6 @@ const Select = forwardRefWithStatics(
         return;
       }
 
-      if (trigger === 'clear') {
-        e.stopPropagation();
-        onChange([], { e, trigger, selectedOptions: [] });
-        return;
-      }
-
       if (trigger === 'tag-remove') {
         e?.stopPropagation?.();
         const values = getSelectValueArr(value, value[index], true, valueType, keys);
@@ -185,6 +179,7 @@ const Select = forwardRefWithStatics(
         }
       }
     };
+
     const onCheckAllChange = (checkAll: boolean, e: React.MouseEvent<HTMLLIElement>) => {
       if (!multiple) {
         return;
@@ -207,7 +202,7 @@ const Select = forwardRefWithStatics(
 
       onChange?.(checkAllValue, {
         e,
-        trigger: checkAll ? 'check' : 'uncheck',
+        trigger: !checkAll ? 'check' : 'uncheck',
         selectedOptions: currentSelectedOptions,
       });
     };
@@ -287,12 +282,12 @@ const Select = forwardRefWithStatics(
       }
     };
 
-    const onClearValue = (context) => {
+    const handleClear = (context) => {
       context.e.stopPropagation();
       if (Array.isArray(value)) {
-        onChange([], { ...context, selectedOptions: [] });
+        onChange([], { ...context, trigger: 'clear', selectedOptions: [] });
       } else {
-        onChange(null, { ...context, selectedOptions: [] });
+        onChange(null, { ...context, trigger: 'clear', selectedOptions: [] });
       }
       onClear(context);
     };
@@ -385,7 +380,7 @@ const Select = forwardRefWithStatics(
                   onChange(values, {
                     e,
                     selectedOptions: currentSelectedOptions,
-                    trigger: 'uncheck',
+                    trigger: 'tag-remove',
                   });
                   tagProps?.onClose?.({ e });
 
@@ -510,7 +505,7 @@ const Select = forwardRefWithStatics(
           onBlur={(_, context) => {
             onBlur?.({ value, e: context.e as React.FocusEvent<HTMLDivElement> });
           }}
-          onClear={onClearValue}
+          onClear={handleClear}
           {...selectInputProps}
         />
       </div>