fix: upload button position flashes when it changes from hidden to displayed (#33820)

* fix: fix upload button position flashes when it changes from hidden to displayed (#33819)

* fix: typo in upload

Co-authored-by: chenqiufan <chenqiufan@shiqiao.com>

components/upload/Upload.tsx

@@ -322,7 +322,7 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
     delete rcUploadProps.id;
   }
 
-  const renderUploadList = (button?: React.ReactNode) =>
+  const renderUploadList = (button?: React.ReactNode, buttonVisible?: boolean) =>
     showUploadList ? (
       <LocaleReceiver componentName="Upload" defaultLocale={defaultLocale.Upload}>
         {(locale: UploadLocale) => {
@@ -354,6 +354,7 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
               isImageUrl={isImageUrl}
               progress={progress}
               appendAction={button}
+              appendActionVisible={buttonVisible}
               itemRender={itemRender}
             />
           );
@@ -400,8 +401,8 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
     [`${prefixCls}-rtl`]: direction === 'rtl',
   });
 
-  const uploadButton = (
+  const renderUploadButton = (uploadButtonStyle?: React.CSSProperties) => (
-    <div className={uploadButtonCls} style={children ? undefined : { display: 'none' }}>
+    <div className={uploadButtonCls} style={uploadButtonStyle}>
       <RcUpload {...rcUploadProps} ref={upload} />
     </div>
   );
@@ -409,14 +410,14 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
   if (listType === 'picture-card') {
     return (
       <span className={classNames(`${prefixCls}-picture-card-wrapper`, className)}>
-        {renderUploadList(uploadButton)}
+        {renderUploadList(renderUploadButton(), !!children)}
       </span>
     );
   }
 
   return (
     <span className={className}>
-      {uploadButton}
+      {renderUploadButton(children ? undefined : { display: 'none' })}
       {renderUploadList()}
     </span>
   );

components/upload/UploadList/index.tsx

@@ -42,6 +42,7 @@ const InternalUploadList: React.ForwardRefRenderFunction<unknown, UploadListProp
     downloadIcon,
     progress,
     appendAction,
+    appendActionVisible,
     itemRender,
   },
   ref,
@@ -225,12 +226,14 @@ const InternalUploadList: React.ForwardRefRenderFunction<unknown, UploadListProp
 
       {/* Append action */}
       {appendAction && (
-        <CSSMotion {...motionConfig}>
+        <CSSMotion {...motionConfig} visible={appendActionVisible} forceRender>
           {({ className: motionClassName, style: motionStyle }) =>
             cloneElement(appendAction, oriProps => ({
               className: classNames(oriProps.className, motionClassName),
               style: {
                 ...motionStyle,
+                // prevent the element has hover css pseudo-class that may cause animation to end prematurely.
+                pointerEvents: motionClassName ? 'none' : undefined,
                 ...oriProps.style,
               },
             }))
@@ -254,6 +257,7 @@ UploadList.defaultProps = {
   showRemoveIcon: true,
   showDownloadIcon: false,
   showPreviewIcon: true,
+  appendActionVisible: true,
   previewFile: previewImage,
   isImageUrl,
 };

components/upload/__tests__/upload.test.js

@@ -867,4 +867,26 @@ describe('Upload', () => {
 
     expect(onChange.mock.calls[0][0].fileList).toHaveLength(1);
   });
+
+  // https://github.com/ant-design/ant-design/issues/33819
+  it('should show the animation of the upload children leaving when the upload children becomes null', async () => {
+    const wrapper = mount(
+      <Upload listType="picture-card">
+        <button type="button">upload</button>
+      </Upload>,
+    );
+    wrapper.setProps({ children: null });
+    expect(wrapper.find('.ant-upload-select-picture-card').getDOMNode().style.display).not.toBe(
+      'none',
+    );
+    await act(async () => {
+      await sleep(100);
+      wrapper
+        .find('.ant-upload-select-picture-card')
+        .getDOMNode()
+        .dispatchEvent(new Event('animationend'));
+      await sleep(20);
+    });
+    expect(wrapper.find('.ant-upload-select-picture-card').getDOMNode().style.display).toBe('none');
+  });
 });

components/upload/interface.tsx

@@ -155,5 +155,6 @@ export interface UploadListProps<T = any> {
   iconRender?: (file: UploadFile<T>, listType?: UploadListType) => React.ReactNode;
   isImageUrl?: (file: UploadFile) => boolean;
   appendAction?: React.ReactNode;
+  appendActionVisible?: boolean;
   itemRender?: ItemRender<T>;
 }