Scrollable nested menu's

[ahmedy00]

Good day everyone,

I needed some nested menu in my app so I created. You may see the reproduction. Also see the code below:

  <v-app>
    <v-container class="d-flex justify-end">
      <v-menu location="left" :close-on-content-click="false">
        <template #activator="{props}">
          <v-btn icon v-bind="props">
            <v-icon>mdi-dots-vertical</v-icon>
          </v-btn>
        </template>
        <v-card class="px-0 pa-2">
          <v-list max-height="300px">
            <v-list-item v-for="item, index in 20" :key="index">
              <v-menu location="left" :attach="`#btn-${index}`">
                <template #activator="{props}">
                  <v-btn
                    v-bind="props"
                    @click="logButtonRef"
                    ref="buttonRef"
                    :id="`btn-${index}`"
                    >activator</v-btn
                  >
                </template>
                <v-card color="green"> Inner Card </v-card>
              </v-menu>
            </v-list-item>
          </v-list>
        </v-card>
      </v-menu>
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref, onMounted, nextTick } from 'vue'
  const buttonRef = ref([])

  onMounted(async () => {
    await nextTick()
    console.log('on mounted', buttonRef.value)
  })

  const logButtonRef = () => {
    console.log('buttonRef', buttonRef.value)
  }
</script>

After creating the nested menus, I attached the innermost menu to its own button for the scrollable state and made it stay where it was first created when scrolled, but this caused a problem like this:

I can no longer place the inner menu to the left of its own button. I tried v-menu's offset attribute, but I couldn't get it to work. Also, when I wrote custom style, it didn't produce any results.
I would greatly appreciate any suggestions you may have.

Tried set v-menu's location attribute to left and doesn't work.

Tried set v-menu's offset attribute to a number array(like [-20, -20] etc.)

Tried give some static margin and transform: translateX()

[angrymarker]

Removing :attach="#btn-${index}" worked for me
https://play.vuetifyjs.com/#eNqVVE1v2zAM/SuENyApECVBdwuSYB+nHXYZdmsKVJXpVKssCZKcJQj830fJiRvHzoZeDIt8eiQfST0cM+/E7Iu1012F2SJbBiyt4gHXGw2w3DFubfpNB2F04FKjA6G496tNlrNC4R5+Vz7I4sBQ55vshE83StQVKCN4kEYTXmERNhkshDIemdGJEnVgQknxSoCCK48XHMRyTgk+cBHkjgfjCHi0zlhfd6Ap5HPQIIkW6FfqnKAJeQVM0Ahbl7lkuQme7dAFKbhazk6eDjEZifkyr1lHq5ZUcJe3+tg9m4Pl7L6fp5I+QMn37AXl9iUQ+NN8bvdDeUYokxSOaipS9fEwASqPxJca7udR1Fc8RFc09lj+0Y0e8p2ad7Uf8kCvF8Ooz+cpUGb7tQrB6J9Y3AI7LAj5/D/YQsawT5QZ+3hM2tRPt7DrtthTu4dgQ3INjUJvJIxKIm4doiYJ4buOm/Qt+mK4COo3jRyxa9czQeZ2KHpzGj2dQb0ivyJN/vNmN3tPlmbxO5XR0QsnbQCPoWreBVla4wIcYzsmYPQPU9FC5xPQuA+/qJtQQ+FMCSN6YEbxBoWiwW/7Bqt4dfzweBcDwBvFmPuDFjC+g9Uajk2q/A+XoaUe05VojYxG4ZSmZjyixS8bgtHkLcp0x1WFCV+fAjV5XE4apdKJ1uFtqW7RRrEaeUiYrJ7oSqn0efwL8FWV6A==

[ahmedy00]

Hey @angrymarker You're right, but I need it attached so that it stays when it was first rendered position when I scroll the elements. But thank you anyway