CollapsibleHeader does not work with whitespace between v-collapsible-header and v-collapsible-body

[SiggyF]

When there is whitespace between the v-collapsible-header and v-collapsible-body the click event on the v-collapsible-header results in the error:

Uncaught TypeError: this.$el.nextSibling.getAttribute is not a function

This error occurs with the following example:

<v-collapsible>
  <v-collapsible-header>Item</v-collapsible-header>
  <v-collapsible-body>
    <v-card>
      <v-card-text class="grey lighten-3">...</v-card-text>
    </v-card>
  </v-collapsible-body>
</v-collapsible>

The problem is that the nextSibling call in CollapsibleHeader.vue returns a #text node instead of the intended v-collapsible-body element.

Possible solutions include using nextElementSibling (with limited browser support) or the .next() function from jquery. A workaround is to collapse the whitespace in the html.

I had this issue using Vue 2.1.6 and vuetify@51945ce6bfb8c20c478cdd8c705af1a5da18d85b

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord