refactor(VOverlay): only gen teleport if mounted and has content

prashantsinghb · Jul 12, 2023 · 4268a68 · 4268a68
1 parent 3aaee71
commit 4268a68
Showing 1 changed file with 51 additions and 53 deletions.
diff --git a/packages/vuetify/src/components/VOverlay/VOverlay.tsx b/packages/vuetify/src/components/VOverlay/VOverlay.tsx
@@ -245,65 +245,63 @@ export const VOverlay = genericComponent<OverlaySlots>()({
           }, activatorEvents.value, props.activatorProps),
         })}
 
-        { isMounted.value && (
+        { isMounted.value && hasContent.value && (
           <Teleport
             disabled={ !teleportTarget.value }
             to={ teleportTarget.value }
           >
-            { hasContent.value && (
-              <div
-                class={[
-                  'v-overlay',
-                  {
-                    'v-overlay--absolute': props.absolute || props.contained,
-                    'v-overlay--active': isActive.value,
-                    'v-overlay--contained': props.contained,
-                  },
-                  themeClasses.value,
-                  rtlClasses.value,
-                  props.class,
-                ]}
-                style={[
-                  stackStyles.value,
-                  { top: convertToUnit(top.value) },
-                  props.style,
-                ]}
-                ref={ root }
-                { ...scopeId }
-                { ...attrs }
+            <div
+              class={[
+                'v-overlay',
+                {
+                  'v-overlay--absolute': props.absolute || props.contained,
+                  'v-overlay--active': isActive.value,
+                  'v-overlay--contained': props.contained,
+                },
+                themeClasses.value,
+                rtlClasses.value,
+                props.class,
+              ]}
+              style={[
+                stackStyles.value,
+                { top: convertToUnit(top.value) },
+                props.style,
+              ]}
+              ref={ root }
+              { ...scopeId }
+              { ...attrs }
+            >
+              <Scrim
+                color={ scrimColor }
+                modelValue={ isActive.value && !!props.scrim }
+                { ...scrimEvents.value }
+              />
+              <MaybeTransition
+                appear
+                persisted
+                transition={ props.transition }
+                target={ activatorEl.value }
+                onAfterLeave={ () => { onAfterLeave(); emit('afterLeave') } }
               >
-                <Scrim
-                  color={ scrimColor }
-                  modelValue={ isActive.value && !!props.scrim }
-                  { ...scrimEvents.value }
-                />
-                <MaybeTransition
-                  appear
-                  persisted
-                  transition={ props.transition }
-                  target={ activatorEl.value }
-                  onAfterLeave={ () => { onAfterLeave(); emit('afterLeave') } }
+                <div
+                  ref={ contentEl }
+                  v-show={ isActive.value }
+                  v-click-outside={{ handler: onClickOutside, closeConditional, include: () => [activatorEl.value] }}
+                  class={[
+                    'v-overlay__content',
+                    props.contentClass,
+                  ]}
+                  style={[
+                    dimensionStyles.value,
+                    contentStyles.value,
+                  ]}
+                  { ...contentEvents.value }
+                  { ...props.contentProps }
                 >
-                  <div
-                    ref={ contentEl }
-                    v-show={ isActive.value }
-                    v-click-outside={{ handler: onClickOutside, closeConditional, include: () => [activatorEl.value] }}
-                    class={[
-                      'v-overlay__content',
-                      props.contentClass,
-                    ]}
-                    style={[
-                      dimensionStyles.value,
-                      contentStyles.value,
-                    ]}
-                    { ...contentEvents.value }
-                    { ...props.contentProps }
-                  >
-                    { slots.default?.({ isActive }) }
-                  </div>
-                </MaybeTransition>
-              </div>
-            )}
+                  { slots.default?.({ isActive }) }
+                </div>
+              </MaybeTransition>
+            </div>
           </Teleport>
         )}
       </>