fix(VTooltip): display intrinsic maximum width content

[yuwu9145]

fixes #16321

Cause: offsetWidth & offsetHeight returns different values between first activate and second activate.

• When hover the first time, text displays as one line, everything calculates correctly
• Due to contentBox.x -= parseFloat(el.style.left || 0). when hover from the second time and afterwards, contentBox will be initially rendered outside page and tooltip overlay initially shows as two lines so offsetWidth & offsetHeight returns inconsistent values

Solution so far:

display intrinsic maximum width content

Description

Motivation and Context

How Has This Been Tested?

Markup:

// Paste your FULL Playground.vue here
<script setup>
import { ref } from 'vue'

const show = ref(false);

</script>

<template>
  <v-app class="pa-4">
    <v-container
      fluid
      class="text-center"
    >
      <v-row
        class="flex"
        justify="space-between"
      >
        <v-col cols="12">
          <v-btn @click="show = !show">
            toggle
          </v-btn>
        </v-col>
  
        <v-col
          cols="12"
          class="mt-12"
        >
          <v-tooltip
            v-model="show"
            location="top"
          >
            <template v-slot:activator="{ props }">
              <v-btn
                icon
                v-bind="props"
              >
                <v-icon color="grey-lighten-1">
                  mdi-cart
                </v-icon>
              </v-btn>
            </template>
            <span>Programmatic tooltip</span>
          </v-tooltip>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

Checklist:

• The PR title is no longer than 64 characters.
• The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and backwards compatible changes and next for non-backwards compatible changes).
• My code follows the code style of this project.
• I've added relevant changes to the documentation (applies to new features and breaking changes in core library)

[yuwu9145]

Find a one line change solution and PR has been updated

[KaelWD]

@yuwu9145 wdyt about this instead?

diff --git a/packages/vuetify/src/components/VOverlay/locationStrategies.ts b/packages/vuetify/src/components/VOverlay/locationStrategies.ts
index a130cee65..9fd584f4c 100644
--- a/packages/vuetify/src/components/VOverlay/locationStrategies.ts
+++ b/packages/vuetify/src/components/VOverlay/locationStrategies.ts
@@ -407,13 +407,9 @@ function connectedLocationStrategy (data: LocationStrategyData, props: StrategyP
       props.maxHeight,
     ],
     () => updateLocation(),
-    { immediate: !activatorFixed }
   )
 
-  if (activatorFixed) nextTick(() => updateLocation())
-  requestAnimationFrame(() => {
-    if (contentStyles.value.maxHeight) updateLocation()
-  })
+  nextTick(() => updateLocation())
 
   return { updateLocation }
 }

I don't remember exactly why I had immediate: !activatorFixed, but the way it is currently has updateLocation being called twice, the first time while the content still has display: none. This also allows #16042's nextTick to be removed.

[yuwu9145]

@yuwu9145 wdyt about this instead?

diff --git a/packages/vuetify/src/components/VOverlay/locationStrategies.ts b/packages/vuetify/src/components/VOverlay/locationStrategies.ts
index a130cee65..9fd584f4c 100644
--- a/packages/vuetify/src/components/VOverlay/locationStrategies.ts
+++ b/packages/vuetify/src/components/VOverlay/locationStrategies.ts
@@ -407,13 +407,9 @@ function connectedLocationStrategy (data: LocationStrategyData, props: StrategyP
       props.maxHeight,
     ],
     () => updateLocation(),
-    { immediate: !activatorFixed }
   )
 
-  if (activatorFixed) nextTick(() => updateLocation())
-  requestAnimationFrame(() => {
-    if (contentStyles.value.maxHeight) updateLocation()
-  })
+  nextTick(() => updateLocation())
 
   return { updateLocation }
 }

I don't remember exactly why I had immediate: !activatorFixed, but the way it is currently has updateLocation being called twice, the first time while the content still has display: none. This also allows #16042's nextTick to be removed.

removing nextTick will respect the fix for #16042, but would it break anything when locationStrategy is NOT connected ?

[yuwu9145]

Could this break anything when locationStrategy is NOT connected ?

[KaelWD]

I suppose it could technically break any custom locationStrategy, that's probably very uncommon though and I think it should always be handled by the strategy itself instead.

[yuwu9145]

Yes, I agree. watchEffect should not have any nextTick from logical perspective

[KaelWD]

This did end up breaking menus, added a fix and TODO to look at later.