added check for componentOptions existing on slot fixes #6901

[ricardovanlaarhoven]

Description

Adding a typeof !== 'undefined' check so only slots with componentOptions will be adding an animation.

Motivation and Context

it fixes #6901

How Has This Been Tested?

I've tested this in my project with the same code as the issues codepen: https://codepen.io/anon/pen/BENVJK?editors=1111

and with the playground as documented below

Markup:

Playground.vue

<template>
  <v-app>
    <child>
      <div slot="speedDialAfter">
        test
      </div>
    </child>
  </v-app>
</template>

<script>
  import Child from './Child.vue';
  export default {
    components: {Child},
    data: () => ({
    })
  }
</script>

Child.vue

<template>
  <div>
    <v-fab-transition>
      <v-speed-dial
          v-model="fab"
          :top="true"
          :right="true"
          :open-on-hover="true"
          direction="bottom"
          transition="slide-y-reverse-transition"
      >
        <v-btn slot="activator" color="accent" dark fab hover v-model="fab">
          <v-icon>view_headline</v-icon>
          <v-icon>close</v-icon>
        </v-btn>
        <v-tooltip left>
          <v-btn
              fab
              dark
              small
              color="red"
              slot="activator"
          >
            <v-icon>delete</v-icon>
          </v-btn>
          <span>delete</span>
        </v-tooltip>
        <slot name="speedDialAfter"></slot>
      </v-speed-dial>
    </v-fab-transition>
  </div>
</template>

<script>
  export default {
    name: 'child',
    data: () => ({
      fab: null
    })
  }
</script>

Types of changes

• Bug fix (non-breaking change which fixes an issue)

Checklist:

• The PR title is no longer than 64 characters.
• The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and breaking changes).
• My code follows the code style of this project.
• I've added relevant changes to the documentation (applies to new features and breaking changes in core library)

No documentation needed

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

[codecov]

Codecov Report

Merging #6905 into master will not change coverage.
The diff coverage is 100%.

@@          Coverage Diff           @@
##           master   #6905   +/-   ##
======================================
  Coverage    85.3%   85.3%           
======================================
  Files         298     298           
  Lines        7221    7221           
  Branches     1804    1804           
======================================
  Hits         6160    6160           
  Misses        960     960           
  Partials      101     101

Impacted Files	Coverage Δ
...es/vuetify/src/components/VSpeedDial/VSpeedDial.js	96.15% <100%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 189cbd2...03255c7. Read the comment docs.

[johnleider]

Suggested change

	if (b.tag && typeof b.componentOptions !== 'undefined' && b.componentOptions.Ctor.options.name === 'v-btn') {
	if (b.tag && typeof b.componentOptions && b.componentOptions.Ctor.options.name === 'v-btn') {

[KaelWD]

Should probably be any non-empty vnode, dunno why it singles out buttons.

[ricardovanlaarhoven]

@johnleider is this typescript specific?
in javascript typeof something results in a string 'undefined'
And then it would always results in true because it's a string.

Anyway the code you suggested results in the same error.

[ricardovanlaarhoven]

@KaelWD Could you tell me how to do that? Your solution sounds better, if i understand it correctly you mean that we change the if to check if there is any vuetify component (starts with v-)

Perhaps we should ask @kuromoka and @sh7dm if there was any particular reason for this

dunno why it singles out buttons.

[johnleider]

My suggested change was merely for style purposes. As far as @KaelWD 's suggestion. This is used in a few places, maybe it's time to normalize the functionality into a helper of sorts.

[ricardovanlaarhoven]

Hi John,

But when i apply your auggestion and test it, it breaks.

[KaelWD]

check if there is any vuetify component (starts with v-)

any element, not just vuetify components

[ricardovanlaarhoven]

How could i get this PR accepted?
there is a lot of discussion and good suggestions, but nothing specific.

John's comment breaks code and i don't get what is better about it since only !== 'undefined' is removed.

Kael's comment is a really good suggestion, but i don't know how to implement that.

[AdrianSkierniewski]

I'm facing same issue and code change above fixes it

[johnleider]

My suggestion was just to change the compare logic. If it doesn't work, so be it.

As far as getting this accepted, I'd say that this works and let's get it in.