Vuetify: [Bug Report] VVirtualScroll "clientHeight" of undefined

[btakakho]

Environment

Vuetify Version: 2.3.1
Vue Version: 2.6.11
Browsers: Chrome 80.0.3987.122
OS: Linux x86_64

Steps to reproduce

1. Copy/paste example from docs
2. Remove :height prop
3. Look at JS console

Expected Behavior

I expect dynamic height support

Actual Behavior

I observe an error that breaks the application

Reproduction Link

https://codepen.io/scilaris/pen/gOPWLEe

Other comments

I guess issue is with attempt to get clientHeight from this.$el on created hook

Code snippet from VVirtualScroller.ts

  created () {
    this.last = this.getLast(0)
  },
  methods: {
    getLast (first: number): number {
      const height = parseInt(this.height || 0, 10) || this.$el.clientHeight // we can't get $el on created hook

      return first + Math.ceil(height / this.__itemHeight)
    },
 }

[jacekkarczmarczyk]

@albertodeago any reason why you used created() instead of mounted()?

[albertodeago]

@jacekkarczmarczyk honestly I don't remember, but I think it's just wrong. mounted should be used if we check for dom element.
The only thing to notice is that if we remove the height for the component (in the example provided) it should be moved into its parent, otherwise there will be no height to "inherit" by the scroller and it will lose its functionality completely.

Going to create a PR for this soon.

[jacekkarczmarczyk]

if we remove the height for the component (in the example provided) it should be moved into its parent, otherwise there will be no height to "inherit" by the scroller and it will lose its functionality completely

IMHO if dev doesn't provide scroller's height then he is responsible for setting the height of the scroller's parent

<div style="height: 300px">
  <v-scroller />
</div>

works as expected (edit: with mounted() instead of created()), not sure if we should complicate the logic more

[albertodeago]

Yeah I agree that is a dev responsibility