From bcf13e690ceddf961d41d9d513c10397618f56ce Mon Sep 17 00:00:00 2001
From: zernonia <59365435+zernonia@users.noreply.github.com>
Date: Tue, 16 Jan 2024 13:25:37 +0800
Subject: [PATCH] fix: scroll doesnt work inside modal on ios (#617)

* fix: listener on window prevent all other scroll

* chore: add story
---
 .../Popover/story/PopoverBodyLock.story.vue   | 101 ++++++++++++++++++
 .../radix-vue/src/shared/useBodyScrollLock.ts |   5 +-
 2 files changed, 105 insertions(+), 1 deletion(-)
 create mode 100644 packages/radix-vue/src/Popover/story/PopoverBodyLock.story.vue

diff --git a/packages/radix-vue/src/Popover/story/PopoverBodyLock.story.vue b/packages/radix-vue/src/Popover/story/PopoverBodyLock.story.vue
new file mode 100644
index 000000000..297428a19
--- /dev/null
+++ b/packages/radix-vue/src/Popover/story/PopoverBodyLock.story.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { ref } from 'vue'
+import {
+  PopoverArrow,
+  PopoverClose,
+  PopoverContent,
+  PopoverPortal,
+  PopoverRoot,
+  PopoverTrigger,
+} from '../'
+
+const toggleState = ref(false)
+</script>
+
+<template>
+  <Story title="Popover/BodyLock" :layout="{ type: 'single', iframe: true }">
+    <Variant title="default">
+      <div class="h-[200vh]">
+        <PopoverRoot v-model:open="toggleState" :modal="true">
+          <PopoverTrigger
+            class="rounded-full w-[35px] h-[35px] inline-flex items-center justify-center text-violet11 bg-white shadow-[0_2px_10px] shadow-blackA7 hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black cursor-default outline-none"
+            aria-label="Update dimensions"
+          >
+            <button>
+              <Icon icon="radix-icons:mixer-horizontal" />
+            </button>
+          </PopoverTrigger>
+          <PopoverPortal>
+            <PopoverContent
+              side="bottom"
+              :side-offset="5"
+              class="rounded p-5 h-[150px] overflow-auto w-[260px] bg-white shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.violet7)] will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
+            >
+              <div class="flex flex-col gap-2.5">
+                <p
+                  class="text-mauve12 text-[15px] leading-[19px] font-medium mb-2.5"
+                >
+                  Dimensions
+                </p>
+                <fieldset class="flex gap-5 items-center">
+                  <label class="text-[13px] text-violet11 w-[75px]" for="width">
+                    Width
+                  </label>
+                  <input
+                    id="width"
+                    class="w-full inline-flex items-center justify-center flex-1 rounded px-2.5 text-[13px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 h-[25px] focus:shadow-[0_0_0_2px] focus:shadow-violet8 outline-none"
+                    defaultValue="100%"
+                  >
+                </fieldset>
+                <fieldset class="flex gap-5 items-center">
+                  <label
+                    class="text-[13px] text-violet11 w-[75px]"
+                    for="maxWidth"
+                  >
+                    Max. width
+                  </label>
+                  <input
+                    id="maxWidth"
+                    class="w-full inline-flex items-center justify-center flex-1 rounded px-2.5 text-[13px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 h-[25px] focus:shadow-[0_0_0_2px] focus:shadow-violet8 outline-none"
+                    defaultValue="300px"
+                  >
+                </fieldset>
+                <fieldset class="flex gap-5 items-center">
+                  <label class="text-[13px] text-violet11 w-[75px]" for="height">
+                    Height
+                  </label>
+                  <input
+                    id="height"
+                    class="w-full inline-flex items-center justify-center flex-1 rounded px-2.5 text-[13px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 h-[25px] focus:shadow-[0_0_0_2px] focus:shadow-violet8 outline-none"
+                    defaultValue="25px"
+                  >
+                </fieldset>
+                <fieldset class="flex gap-5 items-center">
+                  <label
+                    class="text-[13px] text-violet11 w-[75px]"
+                    for="maxHeight"
+                  >
+                    Max. height
+                  </label>
+                  <input
+                    id="maxHeight"
+                    class="w-full inline-flex items-center justify-center flex-1 rounded px-2.5 text-[13px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 h-[25px] focus:shadow-[0_0_0_2px] focus:shadow-violet8 outline-none"
+                    defaultValue="none"
+                  >
+                </fieldset>
+              </div>
+              <PopoverClose
+                class="rounded-full h-[25px] w-[25px] inline-flex items-center justify-center text-violet11 absolute top-[5px] right-[5px] hover:bg-violet4 focus:shadow-[0_0_0_2px] focus:shadow-violet7 outline-none cursor-default"
+                aria-label="Close"
+              >
+                <Icon icon="radix-icons:cross-2" />
+              </PopoverClose>
+              <PopoverArrow class="fill-white" />
+            </PopoverContent>
+          </PopoverPortal>
+        </PopoverRoot>
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/radix-vue/src/shared/useBodyScrollLock.ts b/packages/radix-vue/src/shared/useBodyScrollLock.ts
index d76889ea1..b82508de5 100644
--- a/packages/radix-vue/src/shared/useBodyScrollLock.ts
+++ b/packages/radix-vue/src/shared/useBodyScrollLock.ts
@@ -66,9 +66,12 @@ export function useBodyScrollLock(initialState?: boolean | undefined) {
 
       if (isIOS) {
         stopTouchMoveListener = useEventListener(
-          window,
+          document,
           'touchmove',
           (e: TouchEvent) => {
+            if (e.target !== document.documentElement)
+              return
+
             if (e.touches.length > 1)
               return
             e.preventDefault?.()