fix: Upload.Dragger triggered by label when disabled (#24202)

* refactor Dragger.tsx

* 🐛 Avoid disabled Upload.Dragger being triggered by label

close #24197

components/upload/Dragger.tsx

@@ -9,7 +9,7 @@ export type DraggerProps = UploadProps & { height?: number };
 // eslint-disable-next-line react/prefer-stateless-function
 export default class Dragger extends React.Component<DraggerProps, any> {
   render() {
-    const { props } = this;
-    return <Upload {...props} type="drag" style={{ ...props.style, height: props.height }} />;
+    const { style, height, ...restProps } = this.props;
+    return <Upload {...restProps} type="drag" style={{ ...style, height }} />;
   }
 }

components/upload/Upload.tsx

@@ -299,6 +299,14 @@ class Upload extends React.Component<UploadProps, UploadState> {
     delete rcUploadProps.className;
     delete rcUploadProps.style;
 
+    // Remove id to avoid open by label when trigger is hidden
+    // !children: https://github.com/ant-design/ant-design/issues/14298
+    // disabled: https://github.com/ant-design/ant-design/issues/16478
+    //           https://github.com/ant-design/ant-design/issues/24197
+    if (!children || disabled) {
+      delete rcUploadProps.id;
+    }
+
     const uploadList = showUploadList ? (
       <LocaleReceiver componentName="Upload" defaultLocale={defaultLocale.Upload}>
         {this.renderUploadList}
@@ -342,13 +350,6 @@ class Upload extends React.Component<UploadProps, UploadState> {
       [`${prefixCls}-rtl`]: direction === 'rtl',
     });
 
-    // Remove id to avoid open by label when trigger is hidden
-    // https://github.com/ant-design/ant-design/issues/14298
-    // https://github.com/ant-design/ant-design/issues/16478
-    if (!children || disabled) {
-      delete rcUploadProps.id;
-    }
-
     const uploadButton = (
       <div className={uploadButtonCls} style={children ? undefined : { display: 'none' }}>
         <RcUpload {...rcUploadProps} ref={this.saveUpload} />

components/upload/__tests__/upload.test.js

@@ -219,7 +219,7 @@ describe('Upload', () => {
   });
 
   // https://github.com/ant-design/ant-design/issues/16478
-  it('should not have id if upload is disabled, avoid being triggered by label', () => {
+  it('should not have id if Upload is disabled, avoid being triggered by label', () => {
     const Demo = ({ disabled }) => (
       <Form>
         <Form.Item name="upload" label="Upload" valuePropName="fileList">
@@ -236,6 +236,24 @@ describe('Upload', () => {
     expect(wrapper.find('input#upload').length).toBe(0);
   });
 
+  // https://github.com/ant-design/ant-design/issues/24197
+  it('should not have id if upload.Dragger is disabled, avoid being triggered by label', () => {
+    const Demo = ({ disabled }) => (
+      <Form>
+        <Form.Item name="upload" label="Upload" valuePropName="fileList">
+          <Upload.Dragger disabled={disabled}>
+            <div>upload</div>
+          </Upload.Dragger>
+        </Form.Item>
+      </Form>
+    );
+
+    const wrapper = mount(<Demo />);
+    expect(wrapper.find('input#upload').length).toBe(1);
+    wrapper.setProps({ disabled: true });
+    expect(wrapper.find('input#upload').length).toBe(0);
+  });
+
   it('should be controlled by fileList', () => {
     const fileList = [
       {