diff options
| -rw-r--r-- | changelog.d/scroll-emoji-selector-safari.fix | 1 | ||||
| -rw-r--r-- | src/components/emoji_picker/emoji_picker.js | 4 | ||||
| -rw-r--r-- | 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 new file mode 100644 index 00000000..3f5dda7d --- /dev/null +++ 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 index 349b043d..30c01aa5 100644 --- 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 index 6972164b..227d7718 100644 --- 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" |