Hide clear button when input is disabled or readonly (#1513)

youzan · Oct 28, 2020 · 57f797e · 57f797e
1 parent fa19ecc
commit 57f797e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/packages/zent/src/input/InputCore.tsx b/packages/zent/src/input/InputCore.tsx
@@ -48,6 +48,10 @@ export const InputCore = React.forwardRef<
     onCompositionEndProp
   );
 
+  // No clear button when input is disabled or readonly
+  const showClearIcon =
+    showClear && valueProp && !otherProps.disabled && !otherProps.readOnly;
+
   return (
     <>
       {addonBefore && (
@@ -62,7 +66,7 @@ export const InputCore = React.forwardRef<
         onCompositionStart={onCompositionStart}
         onCompositionEnd={onCompositionEnd}
       />
-      {showClear && valueProp && (
+      {showClearIcon && (
         <Icon
           className="zent-input-close"
           type="close-circle"

diff --git a/packages/zent/src/input/demos/disabled.md b/packages/zent/src/input/demos/disabled.md
@@ -16,6 +16,8 @@ import { Input } from 'zent';
 ReactDOM.render(
   <div>
 			<Input value="Blah" disabled />
+			<Input value="Blah" disabled showClear />
+			<Input value="Blah" readOnly showClear />
 			<Input icon="search" disabled />
 			<Input value="42" disabled addonBefore="$" />
 			<Input value="42" readOnly addonAfter="{i18n.days}" />