fix: issue with css modal flash with snap drawer

Author: dbzx10299

lib/Drawer/components/Root.vue

@@ -213,14 +213,15 @@ const drawerRef = ref<ComponentPublicInstance | null>(null);
 const drawerHeightRef = ref(drawerRef.value?.$el.getBoundingClientRect().height || 0);
 const drawerWidthRef = ref(drawerRef.value?.$el.getBoundingClientRect().width || 0);
 
+
 const {
   activeSnapPoint,
   activeSnapPointIndex,
   onRelease: onReleaseSnapPoints,
   snapPointsOffset,
   onDrag: onDragSnapPoints,
   shouldFade,
-  getPercentageDragged: getSnapPointsPercentageDragged,
+  getPercentageDragged: getSnapPointsPercentageDragged
 } = useSnapPoints({
   snapPoints,
   activeSnapPointProp: toRef(() => activeSnapPointProp) as Ref<number | string | null>,
@@ -231,6 +232,7 @@ const {
   onSnapPointChange,
   direction,
   snapToSequentialPoint,
+  isOpen
 });
 
 function onSnapPointChange(activeSnapPointIndex: number, snapPointsOffset: number[]) {

lib/Drawer/useSnapPoints.ts

@@ -1,4 +1,4 @@
-import { ref, computed, onBeforeUnmount, onMounted, watchEffect } from 'vue'
+import { ref, computed, onBeforeUnmount, onMounted, watch } from 'vue'
 import type { Ref, ComponentPublicInstance } from 'vue'
 
 import { set, isVertical } from './helpers.ts';
@@ -15,6 +15,7 @@ export function useSnapPoints({
   onSnapPointChange,
   direction = 'bottom',
   snapToSequentialPoint,
+  isOpen
 }: {
   activeSnapPointProp?: Ref<number | string | null>;
   setActiveSnapPointProp?(snapPoint: number | null | string): void;
@@ -25,8 +26,9 @@ export function useSnapPoints({
   onSnapPointChange(activeSnapPointIndex: number, snapPointsOffset: number[]): void;
   direction?: DrawerDirection;
   snapToSequentialPoint?: boolean;
+  isOpen: Ref<boolean>;
 }) {
-
+  
   const _activeSnapPoint = ref(snapPoints?.[0] ?? null)
 
   const activeSnapPoint = computed({
@@ -143,17 +145,18 @@ export function useSnapPoints({
     activeSnapPoint.value = snapPoints?.[Math.max(newSnapPointIndex, 0)] ?? null
   }
 
-  watchEffect(() => {
+  watch([activeSnapPoint, activeSnapPointProp, snapPointsOffset, isOpen], () => {
     if (activeSnapPoint.value || activeSnapPointProp?.value) {
       const newIndex =
         snapPoints?.findIndex((snapPoint) => snapPoint === activeSnapPointProp?.value || snapPoint === activeSnapPoint.value) ?? -1;
       if (snapPointsOffset.value && newIndex !== -1 && typeof snapPointsOffset.value[newIndex] === 'number') {
         snapToPoint(snapPointsOffset.value[newIndex] as number);
       }
-    }
+        }
+  }, {
+    immediate: true
   })
 
-
   function onRelease({
     draggedDistance,
     closeDrawer,

src/App.vue

@@ -7,4 +7,5 @@ import NestedDrawer from './components/NestedDrawer.vue'
 
 <template>
   <SnapDrawer/>
+  <!-- <DefaultDrawer/> -->
 </template>

src/components/SnapDrawer.vue

@@ -17,8 +17,8 @@ const snap = ref<string | number | null>(snapPoints[0])
     <Drawer.Trigger class="relative flex h-10 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded-full bg-white px-4 text-sm font-medium shadow-sm transition-all hover:bg-[#FAFAFA] dark:bg-[#161615] dark:hover:bg-[#1A1A19] dark:text-white">
       Open Drawer
     </Drawer.Trigger>
-    <Drawer.Overlay class="fixed inset-0 bg-black/40" />
     <Drawer.Portal>
+      <Drawer.Overlay class="fixed inset-0 bg-black/40" />
       <Drawer.Content
         data-testid="content"
         class="fixed flex flex-col bg-white border border-gray-200 border-b-none rounded-t-[10px] bottom-0 left-0 right-0 h-full max-h-[97%] mx-[-1px]"