fix: Input with readOnly should not clearable (#21494)

components/input/ClearableLabeledInput.tsx

@@ -26,6 +26,7 @@ interface BasicProps {
   disabled?: boolean;
   direction?: any;
   focused?: boolean;
+  readOnly?: boolean;
 }
 
 /**
@@ -42,8 +43,15 @@ interface ClearableInputProps extends BasicProps {
 
 class ClearableLabeledInput extends React.Component<ClearableInputProps> {
   renderClearIcon(prefixCls: string) {
-    const { allowClear, value, disabled, inputType, handleReset } = this.props;
-    if (!allowClear || disabled || value === undefined || value === null || value === '') {
+    const { allowClear, value, disabled, readOnly, inputType, handleReset } = this.props;
+    if (
+      !allowClear ||
+      disabled ||
+      readOnly ||
+      value === undefined ||
+      value === null ||
+      value === ''
+    ) {
       return null;
     }
     const className =

components/input/__tests__/index.test.js

@@ -376,9 +376,11 @@ describe('Input allowClear', () => {
     wrapper.unmount();
   });
 
-  it('should not support allowClear when it is disabled', () => {
-    const wrapper = mount(<Input allowClear defaultValue="111" disabled />);
-    expect(wrapper.find('.ant-input-clear-icon').length).toBe(0);
+  ['disabled', 'readOnly'].forEach(prop => {
+    it(`should not support allowClear when it is ${prop}`, () => {
+      const wrapper = mount(<Input allowClear defaultValue="111" {...{ [prop]: true }} />);
+      expect(wrapper.find('.ant-input-clear-icon').length).toBe(0);
+    });
   });
 });
 

package.json

@@ -152,9 +152,9 @@
     "@types/lodash": "^4.14.139",
     "@types/prop-types": "^15.7.1",
     "@types/raf": "^3.4.0",
-    "@types/react": "^16.9.0",
+    "@types/react": "^16.9.21",
     "@types/react-color": "^3.0.1",
-    "@types/react-dom": "^16.8.4",
+    "@types/react-dom": "^16.9.5",
     "@types/shallowequal": "^1.1.1",
     "@types/warning": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "^2.19.0",