fix: tags initially hidden, closing #11757 (#11761)

* fix: tags initially hidden, closing #11757

* update snapshots

components/tag/__tests__/__snapshots__/index.test.js.snap

@@ -1,17 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Tag can be controlled by visible 1`] = `
+exports[`Tag visibility can be controlled by visible with hidden as initial value 1`] = `<div />`;
+
+exports[`Tag visibility can be controlled by visible with hidden as initial value 2`] = `
+<div
+  class="ant-tag"
+  data-show="true"
+/>
+`;
+
+exports[`Tag visibility can be controlled by visible with hidden as initial value 3`] = `
+<div
+  style="width: 0px;"
+/>
+`;
+
+exports[`Tag visibility can be controlled by visible with visible as initial value 1`] = `
 <div
   class="ant-tag ant-tag-zoom-appear"
   data-show="true"
 />
 `;
 
-exports[`Tag can be controlled by visible 2`] = `null`;
+exports[`Tag visibility can be controlled by visible with visible as initial value 2`] = `
+<div
+  style="width: 0px;"
+/>
+`;
 
-exports[`Tag can be controlled by visible 3`] = `
+exports[`Tag visibility can be controlled by visible with visible as initial value 3`] = `
 <div
   class="ant-tag"
   data-show="true"
+  style="width: 0px;"
 />
 `;

components/tag/__tests__/index.test.js

@@ -39,16 +39,31 @@ describe('Tag', () => {
     expect(wrapper.find('.ant-tag').length).toBe(1);
   });
 
-  it('can be controlled by visible', () => {
+  describe('visibility', () => {
-    const wrapper = mount(
+    it('can be controlled by visible with visible as initial value', () => {
-      <Tag visible />
+      const wrapper = mount(
-    );
+        <Tag visible />
-    expect(wrapper.render()).toMatchSnapshot();
+      );
-    wrapper.setProps({ visible: false });
+      expect(wrapper.render()).toMatchSnapshot();
-    jest.runAllTimers();
+      wrapper.setProps({ visible: false });
-    expect(wrapper.render()).toMatchSnapshot();
+      jest.runAllTimers();
-    wrapper.setProps({ visible: true });
+      expect(wrapper.render()).toMatchSnapshot();
-    jest.runAllTimers();
+      wrapper.setProps({ visible: true });
-    expect(wrapper.render()).toMatchSnapshot();
+      jest.runAllTimers();
+      expect(wrapper.render()).toMatchSnapshot();
+    });
+
+    it('can be controlled by visible with hidden as initial value', () => {
+      const wrapper = mount(
+        <Tag visible={false} />
+      );
+      expect(wrapper.render()).toMatchSnapshot();
+      wrapper.setProps({ visible: true });
+      jest.runAllTimers();
+      expect(wrapper.render()).toMatchSnapshot();
+      wrapper.setProps({ visible: false });
+      jest.runAllTimers();
+      expect(wrapper.render()).toMatchSnapshot();
+    });
   });
 });

components/tag/index.tsx

@@ -28,6 +28,7 @@ export interface TagState {
   closing: boolean;
   closed: boolean;
   visible: boolean;
+  mounted: boolean;
 }
 
 class Tag extends React.Component<TagProps, TagState> {
@@ -37,14 +38,30 @@ class Tag extends React.Component<TagProps, TagState> {
     closable: false,
   };
 
-  static getDerivedStateFromProps(nextProps: TagProps) {
+  static getDerivedStateFromProps(nextProps: TagProps, state: TagState) {
-    return  ('visible' in nextProps) ? { visible: nextProps.visible } : null;
+    if ('visible' in nextProps) {
+      let newState: Partial<TagState> = {
+        visible: nextProps.visible,
+        mounted: true,
+      };
+
+      if (!state.mounted) {
+        newState = {
+          ...newState,
+          closed: !nextProps.visible,
+        };
+      }
+
+      return newState;
+    }
+    return null;
   }
 
   state = {
     closing: false,
     closed: false,
     visible: true,
+    mounted: false,
   };
 
   componentDidUpdate(_prevProps: TagProps, prevState: TagState) {
@@ -130,7 +147,7 @@ class Tag extends React.Component<TagProps, TagState> {
       backgroundColor: (color && !isPresetColor) ? color : null,
       ...style,
     };
-    const tag = this.state.closed ? null : (
+    const tag = this.state.closed ? <div /> : (
       <div
         data-show={!this.state.closing}
         {...divProps}
@@ -141,6 +158,7 @@ class Tag extends React.Component<TagProps, TagState> {
         {closeIcon}
       </div>
     );
+
     return (
       <Wave>
         <Animate