QScrollArea cannot programmatically scroll to bottom when contents change

[ivanjaros]

When content in the q-scroll-area changes with v-for loop, it is impossible to scroll down to the bottom to see the last item when the data for the v-loop changes(items are added).

<template>
<!--  <q-scroll-area style="height: 320px; min-width: 350px; max-width: 380px;" ref="scroll">-->
    <div ref="scroll" style="height: 320px; min-width: 350px; max-width: 380px; overflow: hidden scroll;">
      <template v-for="m in messages" :key="m.id">
        <q-chat-message :text="[m.text]">/q-chat-message>
      </template>
    </div>
<!--  </q-scroll-area>-->
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'ChatArea',
  props: {
    messages: {
      type: Array,
      required: true
    },
  },
  computed: {
    count() {
      return this.messages.length
    },
  },
  methods: {
    scrollDown() {
      // this.$nextTick(() => this.$refs.scroll.scrollTop = this.$refs.scroll.scrollHeight) // div wit htick
      // this.$nextTick(() => this.$refs.scroll.setScrollPercentage("vertical", 1.0))  // scroll-area with tick
      // this.$refs.scroll.scrollTop = this.$refs.scroll.scrollHeight // div without tick
      // this.$refs.scroll.setScrollPercentage("vertical", 1.0) // scroll-area without tick
    }
  },
  watch: {
    count: {
      flush: "post", // this or nextTick must be used
      handler: function() {
        this.scrollDown()
      }
    }
  },
  mounted() {
    this.scrollDown()
  }
})
</script>

Component above can use the area or simple div as example. The div will work but the scroll-area will not. It is important to use the $nextTick to invoke the scrolling behavior, or use flush:post on the watcher. Either will work but without it, both will not work. So even with this fix, the div started to work as expected but the scroll area did not. The bottom item was always below the visible area and the scroll bar was visibly not at the bottom.

Quasar version 2.0.0

[pdanpdan]

Make a codepen showing the problem

[ivanjaros]

i don't know how i can create vue component in these services

[pdanpdan]

I don't think you need components - it looks like all content is quasar components

[pdanpdan]

It is working just fine:
https://codepen.io/pdanpdan/pen/rNGdqjo?editors=1010

[ivanjaros]

It is working just fine: https://codepen.io/pdanpdan/pen/rNGdqjo?editors=1010

eh, lol. it is not working exactly as i described :)
put your mouse over it and scroll down, you will see there is one more item that is not visible.

[pdanpdan]

You are right, there is something strange with the time needed to render the new message.
Updated the codepen here: https://codepen.io/pdanpdan/pen/rNGdqjo?editors=1010
But I need to investigate why it renders so late

I got it - the scroll size is calculated using a QResizeObserver, and it has a default debounce of 100ms, so any delay over 100ms should be good.

[ivanjaros]

So it was a bug after all or configuration issue? Because in that fixed demo i don't see configuration change, hence i take it was a bug?

[pdanpdan]

In order to be sure that the scroll height of the QScrollArea is calculated after a content update you must allow a delay of more than 100ms (the debounce from QResizeObserver)

[ivanjaros]

that feels hacky and relies on time which is not concrete and can differ based on the machine that is running the js and therefore can be 100....or not. so that is too unpredictable for me to use.

also, why can't it properly calculate the area when i call the method? i would expect that should happen automatically without me having to tell it to do it(which there is no method for anyway).

[pdanpdan]

As it is now it is always 100+ms (so to be safe you can use setTimeout 110)
Even with a debounce of 0 (immediate) you would need to call the setScrollPercentage method inside a setTimeout() because on the first nextTick the content is updated and tre resize triggers would be called and only on the second nextTick the values in the component would be updated.

[ivanjaros]

ok, well. it is good to know. it makes it unusable for my use case right now. but at least i will know this for future implementation.
although having a debounce prop for the QResizeObserver in the QScrollArea would make sense, if you ask me...

[pdanpdan]

But if your use case is to always scroll to bottom when new content is added then just get the scroll target and set scrollTop add needed

Updated same: https://codepen.io/pdanpdan/pen/rNGdqjo?editors=1010

[ivanjaros]

the ref is not pointing to the right div, unfortunately. i am already doing this with simple div. i just wanted pretty scrollbar but i can do without.

[rstoenescu]

Should be good now in v2.4.3

[8forty]

looks like this is still happening ([email protected]), but interestingly replacing the 1 with 100 as the scroll percentage fixes (work-around?) this example of the problem originally from @falkoschindler on a nicegui discussion

<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.prod.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="q-app">
      <q-scroll-area ref="scrollArea" style="width: 100px; height: 100px; border: 1px solid #ddd">
        <div v-for="(label, index) in labels" :key="index">{{ label }}</div>
      </q-scroll-area>
      <q-btn label="Add" @click="addLabel" />
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.prod.js"></script>
    <script>
      const app = Vue.createApp({
        setup() {
          const labels = Vue.ref([]);
          const scrollArea = Vue.ref(null);
          const addLabel = () => {
            labels.value.push("Hello");
            Vue.nextTick(() => scrollArea.value.setScrollPercentage("vertical", 1));
          };
          return { labels, scrollArea, addLabel };
        },
      });
      app.use(Quasar);
      app.mount("#q-app");
    </script>
  </body>
</html>