From 3558b335f478bf52ef8364654f6239c0083d09e9 Mon Sep 17 00:00:00 2001
From: Fairy-Phy <phy.public@gmail.com>
Date: Sun, 22 Oct 2023 19:25:02 +0900
Subject: [PATCH] fix: pull to refresh

---
 .../src/components/MkPullToRefresh.vue        | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/components/MkPullToRefresh.vue b/packages/frontend/src/components/MkPullToRefresh.vue
index 3ee5b7f5e9..a5a49b1f14 100644
--- a/packages/frontend/src/components/MkPullToRefresh.vue
+++ b/packages/frontend/src/components/MkPullToRefresh.vue
@@ -1,5 +1,5 @@
 <template>
-	<div ref="rootEl" :class="$style.root">
+	<div ref="rootEl">
 		<div v-if="isPullStart" :class="$style.frame" :style="`--frame-min-height: ${currentHeight}px;`">
 			<div :class="$style.contents">
 				<i v-if="!isRefreshing" :class="['ti', 'ti-arrow-bar-to-down', { [$style.refresh]: isPullEnd }]"></i>
@@ -9,12 +9,14 @@
 				<p v-else>{{ i18n.ts.pullDownToRefresh }}</p>
 			</div>
 		</div>
-		<slot />
+		<div :class="{ [$style.slotClip]: isPullStart }">
+			<slot />
+		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
+import { onMounted, onUnmounted } from 'vue';
 import { deviceKind } from '@/scripts/device-kind.js';
 import { i18n } from '@/i18n.js';
 
@@ -153,7 +155,8 @@ onMounted(() => {
 
 	if (supportPointerDesktop) {
 		rootEl.addEventListener('pointerdown', moveStart);
-		rootEl.addEventListener('pointerup', moveEnd);
+		// ポインターの場合、ポップアップ系の動作をするとdownだけ発火されてupが発火されないため
+		window.addEventListener('pointerup', moveEnd);
 		rootEl.addEventListener('pointermove', moving, {passive: true});
 	}
 	else {
@@ -163,6 +166,10 @@ onMounted(() => {
 	}
 });
 
+onUnmounted(() => {
+	if (supportPointerDesktop) window.removeEventListener('pointerup', moveEnd);
+});
+
 /**
  * emit(refresh)が完了したことを知らせる関数
  * 
@@ -232,4 +239,8 @@ defineExpose({
 			}
 		}
 	}
+
+	.slotClip {
+		overflow-y: clip;
+	}
 </style>