size change not detected despite sizeDependencies

[Iftahh]

trafficstars

My rows have textarea, which can be dragged to resize I'm using mutationObserver to detect the size change and update data on the component and I'm passing this data field as the sizeDependencies (ie. :sizeDependencies="['textAreaHeight']"),

but despite the data getting modified, the size isn't recalculated.

I tried to use also the IdState (see below) and :sizeDependencies="['idState.textAreaHeight']" but had same affect.

Can you help me detect my error?

export default {
  name: 'MockRow',
  extends: DynamicScrollerItem,
  idState() { //replaces data - see  https://github.com/Akryum/vue-virtual-scroller#idstate
    return {
      textAreaHeight: -1
    }
  },
  mixins: [
    IdState({
      idProp: vm => vm.item.name,
    }),
  ],
  mounted(){ 
    let textarea = this.$refs.textarea;
    let $this=this;
    function outputsize() {
      console.log( textarea.offsetHeight)
      $this.idState.textAreaHeight = textarea.offsetHeight;
    }
    outputsize();
    this.areaChangeObserver = new MutationObserver(outputsize).observe(textarea, {
      attributes: true, attributeFilter: [ "style" ]
    })
  },
  beforeDestroy() {
    if (this.areaChangeObserver) {
      this.areaChangeObserver.disconnect();
    }
  },

[Iftahh]

I've also tried to save the height on the item itself, and not the Item component, ie. set item.textAreaHeight and use ['item.textAreaHeight'] as the sizeDependencies, but still no resize event :(

[Iftahh]

I forgot to update - I found a easy workaround: calling updateSize myself,
but I still would like to know why the sizeDependencies I tried to use failed.

[Akryum]

@Iftahh It should be :sizeDependencies="[idState.textAreaHeight]" without the quotation marks, since you want to pass the value that may change and trigger the resize (and not the 'idState.textAreaHeight' string). Do you have some reproduction code to share?

[Iftahh]

Thanks! I missed the fact that the dependencies shouldn't be passed as strings! I don't have reproduction code, I'm only playing with localhost for now.

I wasn't able to pass idState.textAreaHeight because I placed the idState in my class that extends DynamicScrollerItem, (so I got an error - "Property or method "idState" is not defined on the instance but referenced during render")
I guess I should have put the idState at the parent component? This is something else I missed from the reading the docs. Perhaps it would be helpful to see a live demo of how to use the IdState.

I had partial success saving the textarea height on the item itself, and passing [item.textAreaHeight] as the size dependencies - the rows size changed when the textarea height change, but the rows below it didn't move up/down until I moved the mouse out of the resized row! Very weird glitch. For now, I'm reverting back to my workaround of calling the updateSize, since I already extend the DynamicScrollerItem, and it "feels" more natural than saving a field on the item for the sole pupose of triggering resize.

As a side note, good job handling allocenx comment! He is not worthy of a reply. I hope you know your library is awesome and we appreciate all the hard (and clever!) work you put into it.

[Akryum]

@Iftahh You should try wrapping your component with DynamicScrollerItem instead of extending it. You can also use it as the root of your component:

<template>
  <DynamicScrollerItem
    :item="data"
    :active="active"
    :size-dependencies="[
      idState.textAreaHeight,
    ]"
  >
    <!-- rest of the template here -->
  </DynamicScrollerItem>
</template>

<!-- Script/Style... -->

[ghost]

@Iftahh You should try wrapping your component with DynamicScrollerItem instead of extending it. You can also use it as the root of your component:

<template>
  <DynamicScrollerItem
    :item="data"
    :active="active"
    :size-dependencies="[
      idState.textAreaHeight,
    ]"
  >
    <!-- rest of the template here -->
  </DynamicScrollerItem>
</template>

<!-- Script/Style... -->

I use DynamicScrollerItem to display an accordion item that can be expanded or collapsed. I've put item.expanded (boolean) property to a size-dependencies array, but it has not effect - item.expanded changes it's value correctly, dynamic scroller item html element changes it's size as well, but translate css property on dynamic scroller item has wrong value (like scroller item size is not changed).