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

changelog.d/scroll-emoji-selector-safari.fix

@@ -0,0 +1 @@
+Fix scrolling emoji selector in modal in safari ios

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'
     }
   }
 }

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"