[bugfix] Collapse: can not expand when clientHeight equals zero (#2993)

packages/collapse-item/index.js

@@ -80,11 +80,16 @@ export default sfc({
           return;
         }
 
-        const contentHeight = `${content.clientHeight}px`;
+        const { clientHeight } = content;
-        wrapper.style.height = expanded ? 0 : contentHeight;
+        if (clientHeight) {
-        raf(() => {
+          const contentHeight = `${clientHeight}px`;
-          wrapper.style.height = expanded ? contentHeight : 0;
+          wrapper.style.height = expanded ? 0 : contentHeight;
-        });
+          raf(() => {
+            wrapper.style.height = expanded ? contentHeight : 0;
+          });
+        } else {
+          this.onTransitionEnd();
+        }
       });
     }
   },

packages/collapse/test/__snapshots__/index.spec.js.snap

@@ -23,6 +23,26 @@ exports[`disable border 1`] = `
 </div>
 `;
 
+exports[`lazy render collapse content 1`] = `
+<div class="van-collapse van-hairline--top-bottom">
+  <div class="van-collapse-item" style="padding: 0px;">
+    <div class="van-cell van-cell--clickable van-collapse-item__title">
+      <div class="van-cell__title"><span>a</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+  </div>
+  <div class="van-collapse-item van-hairline--top" style="padding: 0px;">
+    <div class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--expanded">
+      <div class="van-cell__title"><span>b</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+    <div class="van-collapse-item__wrapper">
+      <div class="van-collapse-item__content">content</div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`render collapse-item slot 1`] = `
 <div class="van-collapse van-hairline--top-bottom">
   <div class="van-collapse-item">

packages/collapse/test/index.spec.js

@@ -46,7 +46,7 @@ test('basic mode', async () => {
   wrapper.destroy();
 });
 
-it('accordion', async () => {
+test('accordion', async () => {
   const wrapper = mount(component, {
     propsData: {
       accordion: true
@@ -68,7 +68,7 @@ it('accordion', async () => {
   expect(wrapper.vm.active).toEqual('');
 });
 
-it('render collapse-item slot', () => {
+test('render collapse-item slot', () => {
   const wrapper = mount({
     template: `
       <collapse v-model="active">
@@ -94,7 +94,7 @@ it('render collapse-item slot', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
-it('disable border', () => {
+test('disable border', () => {
   const wrapper = mount(component, {
     propsData: {
       border: false
@@ -103,3 +103,32 @@ it('disable border', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('lazy render collapse content', async () => {
+  const wrapper = mount({
+    template: `
+      <collapse v-model="active">
+        <collapse-item title="a" name="first" style="padding: 0;">content</collapse-item>
+        <collapse-item title="b" style="padding: 0;">{{ content }}</collapse-item>
+      </collapse>
+    `,
+    components: {
+      Collapse,
+      CollapseItem
+    },
+    data() {
+      return {
+        content: '',
+        active: []
+      };
+    }
+  });
+
+  const titles = wrapper.findAll('.van-collapse-item__title');
+
+  titles.at(1).trigger('click');
+  await later(50);
+
+  wrapper.vm.content = 'content';
+  expect(wrapper).toMatchSnapshot();
+});