pleroma-fe

commit: c9d07c62024a9e2d6f45e33a491daa6b7127abac
parent 586705ec02d6f399cc72cc759b523519e3d6992b
Author: HJ <30-hj@users.noreply.git.pleroma.social>
Date:   Thu, 29 Jun 2023 16:09:51 +0000

Merge branch 'tusooa/scroll-emoji-selector-safari' into 'develop'

Fix scrolling emoji selector in modal in safari ios

Closes #1264

See merge request pleroma/pleroma-fe!1844
Diffstat:
A
changelog.d/scroll-emoji-selector-safari.fix
1
+
M
src/components/emoji_picker/emoji_picker.js
4
++++
M
src/components/emoji_picker/emoji_picker.vue
8
++++++++

3 files changed, 13 insertions(+), 0 deletions(-)
diff --git a/changelog.d/scroll-emoji-selector-safari.fix b/changelog.d/scroll-emoji-selector-safari.fix
@@ -0,0 +1 @@
+Fix scrolling emoji selector in modal in safari ios
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
@@ -105,6 +105,7 @@ const EmojiPicker = {
       default: false
     }
   },
+  inject: ['popoversZLayer'],
   data () {
     return {
       keyword: '',
@@ -350,6 +351,9 @@ const EmojiPicker = {
 
         return emoji.displayText
       }
+    },
+    isInModal () {
+      return this.popoversZLayer === 'modals'
     }
   }
 }
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
@@ -9,8 +9,14 @@
   >
     <template #content>
       <div class="heading">
+        <!--
+          Body scroll lock needs to be on every scrollable element on safari iOS.
+          Here we tell it to enable scrolling for this element.
+          See https://github.com/willmcpo/body-scroll-lock#vanilla-js
+        -->
         <span
           ref="header"
+          v-body-scroll-lock="isInModal"
           class="emoji-tabs"
         >
           <span
@@ -75,8 +81,10 @@
               @input="$event.target.composing = false"
             >
           </div>
+          <!-- Enables scrolling for this element on safari iOS. See comments for header. -->
           <DynamicScroller
             ref="emoji-groups"
+            v-body-scroll-lock="isInModal"
             class="emoji-groups"
             :class="groupsScrolledClass"
             :min-item-size="minItemSize"