From 2d8396bad79a086ae57b3ef462e681e81786f02d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= <afc163@gmail.com>
Date: Wed, 8 May 2019 20:26:19 +0800
Subject: [PATCH] :bug: Avoid disabled Upload being triggered by label (#16483)

close #16478
---
 components/upload/Upload.tsx               |  3 +-
 components/upload/__tests__/upload.test.js | 59 ++++++++++++++++++++++
 2 files changed, 61 insertions(+), 1 deletion(-)

diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx
index b082f9986b..0751b2e6ff 100644
--- a/components/upload/Upload.tsx
+++ b/components/upload/Upload.tsx
@@ -319,7 +319,8 @@ class Upload extends React.Component<UploadProps, UploadState> {
 
     // Remove id to avoid open by label when trigger is hidden
     // https://github.com/ant-design/ant-design/issues/14298
-    if (!children) {
+    // https://github.com/ant-design/ant-design/issues/16478
+    if (!children || disabled) {
       delete rcUploadProps.id;
     }
 
diff --git a/components/upload/__tests__/upload.test.js b/components/upload/__tests__/upload.test.js
index f2b07856c0..11cab9b602 100644
--- a/components/upload/__tests__/upload.test.js
+++ b/components/upload/__tests__/upload.test.js
@@ -2,6 +2,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import Upload from '..';
+import Form from '../../form';
 import { T, fileToObject, genPercentAdd, getFileItem, removeFileItem } from '../utils';
 import { setup, teardown } from './mock';
 
@@ -201,6 +202,64 @@ describe('Upload', () => {
     expect(wrapper.find('input[type="file"]').length).toBe(1);
   });
 
+  // https://github.com/ant-design/ant-design/issues/14298
+  it('should not have id if upload children is null, avoid being triggered by label', () => {
+    // eslint-disable-next-line
+    class Demo extends React.Component {
+      render() {
+        const {
+          form: { getFieldDecorator },
+          children,
+        } = this.props;
+        return (
+          <Form>
+            <Form.Item label="Upload">
+              {getFieldDecorator('upload')(<Upload>{children}</Upload>)}
+            </Form.Item>
+          </Form>
+        );
+      }
+    }
+    const WrappedDemo = Form.create()(Demo);
+    const wrapper = mount(
+      <WrappedDemo>
+        <div>upload</div>
+      </WrappedDemo>,
+    );
+    expect(wrapper.find('input#upload').length).toBe(1);
+    wrapper.setProps({ children: null });
+    expect(wrapper.find('input#upload').length).toBe(0);
+  });
+
+  // https://github.com/ant-design/ant-design/issues/16478
+  it('should not have id if upload is disabled, avoid being triggered by label', () => {
+    // eslint-disable-next-line
+    class Demo extends React.Component {
+      render() {
+        const {
+          form: { getFieldDecorator },
+          disabled,
+        } = this.props;
+        return (
+          <Form>
+            <Form.Item label="Upload">
+              {getFieldDecorator('upload')(
+                <Upload disabled={disabled}>
+                  <div>upload</div>
+                </Upload>,
+              )}
+            </Form.Item>
+          </Form>
+        );
+      }
+    }
+    const WrappedDemo = Form.create()(Demo);
+    const wrapper = mount(<WrappedDemo />);
+    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 = [
       {