feat(location-strategies): infinite loop on update location

[jcjp]

Description

• Unable to re-open my previously closed PR, re-opening a new PR
• fix(location-strategies): infinite loop on update location #21143

Reduce the number of reposition to a max of 2, if we only set it to 1 it will be a little off the mark with the correct position and size. This is to prevent infinite reposition, and to make it settle to a certain location after the max retries we need to pass a location to the child VMenu for example :menu-props={ location: "top"} after 2 tries of reposition and resizing it will settle at the top. See the example here: #21098.

If you guys are okay with this enhancement or you have a better idea on how to tackle this problem let me know thanks!

On this VPlay add the location: "top" to see and test.

<template>
  <v-app>
    <div>
      <v-select
        label="Location"
        v-model="location"
        :items="[
          'bottom','top' ,'center' ,'end' ,'left' ,'right' ,'start' ,'bottom top' ,'bottom center' ,'bottom end',
          'bottom left' ,'bottom right' ,'bottom start' ,'top center' ,'top end' ,'top left' ,'top right',
          'top start' ,'center end' ,'center left' ,'center right' ,'center start' ,'end left' ,'end right',
          'end start' ,'left right' ,'left start' ,'right start'
        ]"
      />
    </div>

    <div class="container">
      lorem<br />
      ipsum<br />
      lorem<br />
      ipsum<br />
      {{ location }}<br />
      This select menu should flicker on chrome browser:<br />

      <div id="select-wrapper">
        <v-select
          label="Select"
          :items="['California', 'Colorado']"
          :menu-props="{ attach: '#select-wrapper', location: location }"
        />
      </div>
    </div>
  </v-app>
</template>

<script setup>
import { ref } from "vue"

const location = ref(null)
</script>

<style>
  .container {
    width: 500px;
    height: 280px;
    border: 1px solid grey;
    overflow-y: auto;
  }

  #select-wrapper {
    position: relative;
  }
</style>

[johnleider]

Checking the docs on mobile, the first thing I ran into was this:

Current:

This P.R.

Every menu example I came across exhibited some form of this behavior.

[jcjp]

Every menu example I came across exhibited some form of this behavior.

John what are you using for testing? I ran the docs locally and test out VSelect, VMenu, VAutocomplete and VCombobox. Do you think it might be cache? I did re-install my node modules.

We might need more pair of eyes on to check on this.

[johnleider]

Did you build Vuetify before running the docs?

John I have updated this and checked using the build command that we discussed, let me know if there are still problems.

[KaelWD]

Different approach that only checks for flipping in the resize observer and doesn't potentially introduce another infinite loop by unterminated while (true): #21300

[jcjp]

Close this PR to a more better solution from Kael.