fix(VNavigationDrawer): manually apply dragging styles to avoid rerender

dragStyles causes rerendering of internal items when dragging
vuetifyjs · Apr 17, 2024 · bb486ae · bb486ae
1 parent d6a500b
commit bb486ae
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 4 deletions.
diff --git a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx
@@ -155,7 +155,8 @@ export const VNavigationDrawer = genericComponent<VNavigationDrawerSlots>()({
       isActive.value = props.permanent || !mobile.value
     })
 
-    const { isDragging, dragProgress, dragStyles } = useTouch({
+    const { isDragging, dragProgress } = useTouch({
+      el: rootEl,
       isActive,
       isTemporary,
       width,
@@ -243,7 +244,6 @@ export const VNavigationDrawer = genericComponent<VNavigationDrawerSlots>()({
             style={[
               backgroundColorStyles.value,
               layoutItemStyles.value,
-              dragStyles.value,
               ssrBootStyles.value,
               stickyStyles.value,
               props.style,

diff --git a/packages/vuetify/src/components/VNavigationDrawer/touch.ts b/packages/vuetify/src/components/VNavigationDrawer/touch.ts
@@ -1,13 +1,22 @@
 // Composables
+import { useToggleScope } from '@/composables/toggleScope'
 import { useVelocity } from '@/composables/touch'
 
 // Utilities
-import { computed, onBeforeUnmount, onMounted, shallowRef } from 'vue'
+import { computed, onBeforeUnmount, onMounted, onScopeDispose, shallowRef, watchEffect } from 'vue'
 
 // Types
 import type { Ref } from 'vue'
 
-export function useTouch ({ isActive, isTemporary, width, touchless, position }: {
+export function useTouch ({
+  el,
+  isActive,
+  isTemporary,
+  width,
+  touchless,
+  position,
+}: {
+  el: Ref<HTMLElement | undefined>
   isActive: Ref<boolean>
   isTemporary: Ref<boolean>
   width: Ref<number>
@@ -174,6 +183,21 @@ export function useTouch ({ isActive, isTemporary, width, touchless, position }:
     } : undefined
   })
 
+  useToggleScope(isDragging, () => {
+    const transform = el.value?.style.transform ?? null
+    const transition = el.value?.style.transition ?? null
+
+    watchEffect(() => {
+      el.value?.style.setProperty('transform', dragStyles.value?.transform || 'none')
+      el.value?.style.setProperty('transition', dragStyles.value?.transition || null)
+    })
+
+    onScopeDispose(() => {
+      el.value?.style.setProperty('transform', transform)
+      el.value?.style.setProperty('transition', transition)
+    })
+  })
+
   return {
     isDragging,
     dragProgress,