fix: unify readOnly prop handling

Author: RylanBot

packages/components/input/Input.tsx

@@ -1,10 +1,10 @@
 import React, { useState, useRef, useImperativeHandle, useEffect } from 'react';
-import classNames from 'classnames';
 import {
   BrowseIcon as TdBrowseIcon,
   BrowseOffIcon as TdBrowseOffIcon,
   CloseCircleFilledIcon as TdCloseCircleFilledIcon,
 } from 'tdesign-icons-react';
+import classNames from 'classnames';
 import { isFunction } from 'lodash-es';
 import useLayoutEffect from '../hooks/useLayoutEffect';
 import forwardRefWithStatics from '../_util/forwardRefWithStatics';
@@ -82,6 +82,8 @@ const Input = forwardRefWithStatics(
       allowInput,
       allowInputOverMax,
       name,
+      readOnly,
+      readonly,
       format,
       onClick,
       onClear,
@@ -101,7 +103,7 @@ const Input = forwardRefWithStatics(
       onChange: onChangeFromProps,
       ...restProps
     } = props;
-    const readOnly = props.readOnly || props.readonly;
+    const readOnlyProp = readOnly || readonly;
 
     const [value, onChange] = useControlled(props, 'value', onChangeFromProps);
     const { limitNumber, getValueByLimitNumber, tStatus } = useLengthLimit({
@@ -126,7 +128,7 @@ const Input = forwardRefWithStatics(
     const [composingValue, setComposingValue] = useState<string>('');
 
     // 组件内部 input 原生控件是否处于 readonly 状态，当整个组件 readonly 时，或者处于不可输入时
-    const isInnerInputReadonly = readOnly || !allowInput;
+    const isInnerInputReadonly = readOnlyProp || !allowInput;
     const isValueEnabled = value && !disabled;
     const alwaysShowClearIcon = inputConfig?.clearTrigger === 'always';
     const isShowClearIcon =
@@ -248,7 +250,7 @@ const Input = forwardRefWithStatics(
     const renderInputNode = (
       <div
         className={classNames(inputClass, `${classPrefix}-input`, {
-          [`${classPrefix}-is-readonly`]: readOnly,
+          [`${classPrefix}-is-readonly`]: readOnlyProp,
           [`${classPrefix}-is-disabled`]: disabled,
           [`${classPrefix}-is-focused`]: isFocused,
           [`${classPrefix}-size-s`]: size === 'small',

packages/components/range-input/RangeInput.tsx

@@ -57,6 +57,8 @@ const RangeInput = React.forwardRef<RangeInputInstanceFunctions, RangeInputProps
     suffixIcon,
     clearable,
     showClearIconOnEmpty,
+    readOnly,
+    readonly,
     onClick,
     onEnter,
     onClear,
@@ -67,7 +69,7 @@ const RangeInput = React.forwardRef<RangeInputInstanceFunctions, RangeInputProps
     onChange: onChangeFromProps,
     ...restProps
   } = props;
-  const readOnly = props.readOnly || props.readonly;
+  const readOnlyProp = readOnly || readonly;
 
   const name = `${classPrefix}-range-input`;
 
@@ -189,7 +191,7 @@ const RangeInput = React.forwardRef<RangeInputInstanceFunctions, RangeInputProps
           })}
           placeholder={firstPlaceholder}
           disabled={disabled}
-          readOnly={readOnly}
+          readOnly={readOnlyProp}
           format={firstFormat}
           value={firstValue}
           onClick={({ e }) => onClick?.({ e, position: 'first' })}
@@ -211,7 +213,7 @@ const RangeInput = React.forwardRef<RangeInputInstanceFunctions, RangeInputProps
           })}
           placeholder={secondPlaceholder}
           disabled={disabled}
-          readOnly={readOnly}
+          readOnly={readOnlyProp}
           format={secondFormat}
           value={secondValue}
           onClick={({ e }) => onClick?.({ e, position: 'second' })}

packages/components/select-input/useMultiple.tsx

@@ -118,6 +118,7 @@ export default function useMultiple(props: SelectInputProps) {
         {...props.tagInputProps}
         inputProps={{
           ...props.inputProps,
+          readOnly: !props.allowInput || readOnly,
           readonly: !props.allowInput || readOnly,
           inputClass: classNames(props.tagInputProps?.className, {
             [`${classPrefix}-input--focused`]: p.popupVisible,

packages/components/tag-input/TagInput.tsx

@@ -162,6 +162,7 @@ const TagInput = forwardRef<InputRef, TagInputProps>((originalProps, ref) => {
       } as React.CSSProperties)
     : {};
 
+    console.log('>>', inputProps?.readOnly, inputProps?.readonly);
   return (
     <TInput
       ref={tagInputRef as React.RefObject<InputRef>}
@@ -173,7 +174,7 @@ const TagInput = forwardRef<InputRef, TagInputProps>((originalProps, ref) => {
       onWheel={onWheel}
       size={size}
       borderless={borderless}
-      readonly={readOnly}
+      readOnly={readOnly}
       disabled={disabled}
       label={renderLabel({ displayNode, label })}
       className={classnames(classes)}
@@ -187,7 +188,8 @@ const TagInput = forwardRef<InputRef, TagInputProps>((originalProps, ref) => {
       suffix={suffix}
       prefixIcon={prefixIcon}
       suffixIcon={suffixIconNode}
-      showInput={!inputProps?.readOnly || !inputProps?.readonly || !tagValue || !tagValue?.length}
+      // showInput={!inputProps?.readOnly || !inputProps?.readonly || !tagValue || !tagValue?.length}
+      showInput={!inputProps?.readonly || !tagValue || !tagValue?.length}
       keepWrapperWidth={!autoWidth}
       onPaste={onPaste}
       onClick={onInnerClick}

test/snap/__snapshots__/csr.test.jsx.snap

@@ -150694,7 +150694,7 @@ exports[`ssr snapshot test > ssr test packages/components/textarea/_example/even
 
 exports[`ssr snapshot test > ssr test packages/components/textarea/_example/maxlength.tsx 1`] = `"<div style="width:100%;gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-textarea"><textarea placeholder="请输入内容，超出限制无法输入" style="height:auto;min-height:auto" class="t-textarea__inner"></textarea><div class="t-textarea__info_wrapper"><div class="t-textarea__tips t-textarea__tips--normal">这里可以放一些提示文字</div><span class="t-textarea__limit">0<!-- -->/20</span></div></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="请输入内容，超出限制可以输入" style="height:auto;min-height:auto" class="t-textarea__inner"></textarea><div class="t-textarea__info_wrapper t-textarea__info_wrapper_align"><span class="t-textarea__limit">0<!-- -->/20</span></div></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="请输入内容，一个中文汉字表示两个字符长度，超出限制无法输入" style="height:auto;min-height:auto" class="t-textarea__inner"></textarea><div class="t-textarea__info_wrapper t-textarea__info_wrapper_align"><span class="t-textarea__limit">0<!-- -->/20</span></div></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="请输入内容，一个中文汉字表示两个字符长度，超出限制可以输入" style="height:auto;min-height:auto" class="t-textarea__inner"></textarea><div class="t-textarea__info_wrapper t-textarea__info_wrapper_align"><span class="t-textarea__limit">0<!-- -->/20</span></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test packages/components/textarea/_example/type.tsx 1`] = `"<div style="width:100%;gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-textarea"><textarea placeholder="请输入内容" style="height:auto;min-height:auto" class="t-textarea__inner" readonly="">只读状态</textarea></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="请输入内容" style="height:auto;min-height:auto" class="t-textarea__inner t-is-disabled" disabled="">禁用状态</textarea></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="normal" style="height:auto;min-height:auto" class="t-textarea__inner">普通状态</textarea><div class="t-textarea__info_wrapper"><div class="t-textarea__tips t-textarea__tips--normal">正常提示</div></div></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="success" style="height:auto;min-height:auto" class="t-textarea__inner t-is-success">成功状态</textarea><div class="t-textarea__info_wrapper"><div class="t-textarea__tips t-textarea__tips--success">成功提示</div></div></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="warning" style="height:auto;min-height:auto" class="t-textarea__inner t-is-warning">警告状态</textarea><div class="t-textarea__info_wrapper"><div class="t-textarea__tips t-textarea__tips--warning">警告提示</div></div></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="error" style="height:auto;min-height:auto" class="t-textarea__inner t-is-error">错误状态</textarea><div class="t-textarea__info_wrapper"><div class="t-textarea__tips t-textarea__tips--error">错误提示</div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test packages/components/textarea/_example/type.tsx 1`] = `"<div style="width:100%;gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-textarea"><textarea placeholder="请输入内容" readonly="" style="height:auto;min-height:auto" class="t-textarea__inner">只读状态</textarea></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="请输入内容" style="height:auto;min-height:auto" class="t-textarea__inner t-is-disabled" disabled="">禁用状态</textarea></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="normal" style="height:auto;min-height:auto" class="t-textarea__inner">普通状态</textarea><div class="t-textarea__info_wrapper"><div class="t-textarea__tips t-textarea__tips--normal">正常提示</div></div></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="success" style="height:auto;min-height:auto" class="t-textarea__inner t-is-success">成功状态</textarea><div class="t-textarea__info_wrapper"><div class="t-textarea__tips t-textarea__tips--success">成功提示</div></div></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="warning" style="height:auto;min-height:auto" class="t-textarea__inner t-is-warning">警告状态</textarea><div class="t-textarea__info_wrapper"><div class="t-textarea__tips t-textarea__tips--warning">警告提示</div></div></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="error" style="height:auto;min-height:auto" class="t-textarea__inner t-is-error">错误状态</textarea><div class="t-textarea__info_wrapper"><div class="t-textarea__tips t-textarea__tips--error">错误提示</div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/time-picker/_example/disabled.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><h3>禁用整个选择器</h3></div><div class="t-space-item"><div class="t-time-picker"><div class="t-time-picker__group t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-is-disabled t-align-left t-input--suffix"><input placeholder="选择时间" type="text" class="t-input__inner" readonly="" disabled="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-time" style="fill:none"><g id="time"><path id="fill1" fill="transparent" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"></path><path id="stroke1" stroke="currentColor" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M12 6.5L12 12L15 15" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div></div><div class="t-space-item"><h3>禁用指定时间</h3></div><div class="t-space-item"><div class="t-time-picker"><div class="t-time-picker__group t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="选择时间" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-time" style="fill:none"><g id="time"><path id="fill1" fill="transparent" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"></path><path id="stroke1" stroke="currentColor" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M12 6.5L12 12L15 15" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div></div></div>"`;
 

test/snap/__snapshots__/ssr.test.jsx.snap

@@ -1118,7 +1118,7 @@ exports[`ssr snapshot test > ssr test packages/components/textarea/_example/even
 
 exports[`ssr snapshot test > ssr test packages/components/textarea/_example/maxlength.tsx 1`] = `"<div style="width:100%;gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-textarea"><textarea placeholder="请输入内容，超出限制无法输入" style="height:auto;min-height:auto" class="t-textarea__inner"></textarea><div class="t-textarea__info_wrapper"><div class="t-textarea__tips t-textarea__tips--normal">这里可以放一些提示文字</div><span class="t-textarea__limit">0<!-- -->/20</span></div></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="请输入内容，超出限制可以输入" style="height:auto;min-height:auto" class="t-textarea__inner"></textarea><div class="t-textarea__info_wrapper t-textarea__info_wrapper_align"><span class="t-textarea__limit">0<!-- -->/20</span></div></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="请输入内容，一个中文汉字表示两个字符长度，超出限制无法输入" style="height:auto;min-height:auto" class="t-textarea__inner"></textarea><div class="t-textarea__info_wrapper t-textarea__info_wrapper_align"><span class="t-textarea__limit">0<!-- -->/20</span></div></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="请输入内容，一个中文汉字表示两个字符长度，超出限制可以输入" style="height:auto;min-height:auto" class="t-textarea__inner"></textarea><div class="t-textarea__info_wrapper t-textarea__info_wrapper_align"><span class="t-textarea__limit">0<!-- -->/20</span></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test packages/components/textarea/_example/type.tsx 1`] = `"<div style="width:100%;gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-textarea"><textarea placeholder="请输入内容" style="height:auto;min-height:auto" class="t-textarea__inner" readonly="">只读状态</textarea></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="请输入内容" style="height:auto;min-height:auto" class="t-textarea__inner t-is-disabled" disabled="">禁用状态</textarea></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="normal" style="height:auto;min-height:auto" class="t-textarea__inner">普通状态</textarea><div class="t-textarea__info_wrapper"><div class="t-textarea__tips t-textarea__tips--normal">正常提示</div></div></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="success" style="height:auto;min-height:auto" class="t-textarea__inner t-is-success">成功状态</textarea><div class="t-textarea__info_wrapper"><div class="t-textarea__tips t-textarea__tips--success">成功提示</div></div></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="warning" style="height:auto;min-height:auto" class="t-textarea__inner t-is-warning">警告状态</textarea><div class="t-textarea__info_wrapper"><div class="t-textarea__tips t-textarea__tips--warning">警告提示</div></div></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="error" style="height:auto;min-height:auto" class="t-textarea__inner t-is-error">错误状态</textarea><div class="t-textarea__info_wrapper"><div class="t-textarea__tips t-textarea__tips--error">错误提示</div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test packages/components/textarea/_example/type.tsx 1`] = `"<div style="width:100%;gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-textarea"><textarea placeholder="请输入内容" readonly="" style="height:auto;min-height:auto" class="t-textarea__inner">只读状态</textarea></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="请输入内容" style="height:auto;min-height:auto" class="t-textarea__inner t-is-disabled" disabled="">禁用状态</textarea></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="normal" style="height:auto;min-height:auto" class="t-textarea__inner">普通状态</textarea><div class="t-textarea__info_wrapper"><div class="t-textarea__tips t-textarea__tips--normal">正常提示</div></div></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="success" style="height:auto;min-height:auto" class="t-textarea__inner t-is-success">成功状态</textarea><div class="t-textarea__info_wrapper"><div class="t-textarea__tips t-textarea__tips--success">成功提示</div></div></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="warning" style="height:auto;min-height:auto" class="t-textarea__inner t-is-warning">警告状态</textarea><div class="t-textarea__info_wrapper"><div class="t-textarea__tips t-textarea__tips--warning">警告提示</div></div></div></div><div class="t-space-item"><div class="t-textarea"><textarea placeholder="error" style="height:auto;min-height:auto" class="t-textarea__inner t-is-error">错误状态</textarea><div class="t-textarea__info_wrapper"><div class="t-textarea__tips t-textarea__tips--error">错误提示</div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/time-picker/_example/disabled.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><h3>禁用整个选择器</h3></div><div class="t-space-item"><div class="t-time-picker"><div class="t-time-picker__group t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-is-disabled t-align-left t-input--suffix"><input placeholder="选择时间" type="text" class="t-input__inner" readonly="" disabled="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-time" style="fill:none"><g id="time"><path id="fill1" fill="transparent" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"></path><path id="stroke1" stroke="currentColor" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M12 6.5L12 12L15 15" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div></div><div class="t-space-item"><h3>禁用指定时间</h3></div><div class="t-space-item"><div class="t-time-picker"><div class="t-time-picker__group t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="选择时间" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-time" style="fill:none"><g id="time"><path id="fill1" fill="transparent" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"></path><path id="stroke1" stroke="currentColor" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M12 6.5L12 12L15 15" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div></div></div>"`;