From 4631b1b9f7e7813cab65e0d0705cd1e265f23393 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 9 Oct 2022 22:09:50 +0300 Subject: suggestor popover --- src/components/emoji_input/emoji_input.js | 80 +++++++++++++++++++------------ 1 file changed, 50 insertions(+), 30 deletions(-) (limited to 'src/components/emoji_input/emoji_input.js') diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index ffc0ffac..b365043c 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -1,5 +1,6 @@ import Completion from '../../services/completion/completion.js' import EmojiPicker from '../emoji_picker/emoji_picker.vue' +import Popover from 'src/components/popover/popover.vue' import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue' import { take } from 'lodash' import { findOffset } from '../../services/offset_finder/offset_finder.service.js' @@ -109,6 +110,7 @@ const EmojiInput = { data () { return { input: undefined, + caretEl: undefined, highlighted: 0, caret: 0, focused: false, @@ -117,10 +119,12 @@ const EmojiInput = { temporarilyHideSuggestions: false, keepOpen: false, disableClickOutside: false, - suggestions: [] + suggestions: [], + overlayStyle: {} } }, components: { + Popover, EmojiPicker, UnicodeDomainIndicator }, @@ -128,7 +132,15 @@ const EmojiInput = { padEmoji () { return this.$store.getters.mergedConfig.padEmoji }, + preText () { + return this.modelValue.slice(0, this.caret) + }, + postText () { + return this.modelValue.slice(this.caret) + }, showSuggestions () { + console.log(this.focused) + console.log(this.suggestions) return this.focused && this.suggestions && this.suggestions.length > 0 && @@ -191,10 +203,21 @@ const EmojiInput = { } }, mounted () { - const { root } = this.$refs + const { root, hiddenOverlayCaret, suggestorPopover } = this.$refs const input = root.querySelector('.emoji-input > input') || root.querySelector('.emoji-input > textarea') if (!input) return this.input = input + this.caretEl = hiddenOverlayCaret + suggestorPopover.setAnchorEl(this.caretEl) + const style = getComputedStyle(this.input) + this.overlayStyle.padding = style.padding + this.overlayStyle.border = style.border + this.overlayStyle.margin = style.margin + this.overlayStyle.lineHeight = style.lineHeight + this.overlayStyle.fontFamily = style.fontFamily + this.overlayStyle.fontSize = style.fontSize + this.overlayStyle.wordWrap = style.wordWrap + this.overlayStyle.whiteSpace = style.whiteSpace this.resize() input.addEventListener('blur', this.onBlur) input.addEventListener('focus', this.onFocus) @@ -204,6 +227,16 @@ const EmojiInput = { input.addEventListener('click', this.onClickInput) input.addEventListener('transitionend', this.onTransition) input.addEventListener('input', this.onInput) + input.addEventListener('scroll', (e) => { + console.log({ + top: this.input.scrollTop, + left: this.input.scrollLeft + }) + this.$refs.hiddenOverlay.scrollTo({ + top: this.input.scrollTop, + left: this.input.scrollLeft + }) + }) }, unmounted () { const { input } = this @@ -219,22 +252,32 @@ const EmojiInput = { } }, watch: { - showSuggestions: function (newValue) { + showSuggestions: function (newValue, oldValue) { this.$emit('shown', newValue) + if (newValue) { + this.$refs.suggestorPopover.showPopover() + } else { + this.$refs.suggestorPopover.hidePopover() + } }, textAtCaret: async function (newWord) { const firstchar = newWord.charAt(0) - this.suggestions = [] - if (newWord === firstchar) return + if (newWord === firstchar) { + this.suggestions = [] + return + } const matchedSuggestions = await this.suggest(newWord, this.maybeLocalizedEmojiNamesAndKeywords) // Async: cancel if textAtCaret has changed during wait - if (this.textAtCaret !== newWord) return - if (matchedSuggestions.length <= 0) return + if (this.textAtCaret !== newWord || matchedSuggestions.length <= 0) { + this.suggestions = [] + return + } this.suggestions = take(matchedSuggestions, 5) .map(({ imageUrl, ...rest }) => ({ ...rest, img: imageUrl || '' })) + this.$refs.suggestorPopover.updateStyles() }, suggestions: { handler (newValue) { @@ -525,29 +568,6 @@ const EmojiInput = { this.caret = selectionStart }, resize () { - const panel = this.$refs.panel - if (!panel) return - const picker = this.$refs.picker.$el - const panelBody = this.$refs['panel-body'] - const { offsetHeight, offsetTop } = this.input - const offsetBottom = offsetTop + offsetHeight - - this.setPlacement(panelBody, panel, offsetBottom) - this.setPlacement(picker, picker, offsetBottom) - }, - setPlacement (container, target, offsetBottom) { - if (!container || !target) return - - target.style.top = offsetBottom + 'px' - target.style.bottom = 'auto' - - if (this.placement === 'top' || (this.placement === 'auto' && this.overflowsBottom(container))) { - target.style.top = 'auto' - target.style.bottom = this.input.offsetHeight + 'px' - } - }, - overflowsBottom (el) { - return el.getBoundingClientRect().bottom > window.innerHeight } } } -- cgit v1.2.3-70-g09d2 From 05640e4cc16693be2712a2c5aaf46d3305c37fcb Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 9 Oct 2022 23:02:39 +0300 Subject: cleanup --- src/components/emoji_input/emoji_input.js | 22 +--------------------- .../post_status_form/post_status_form.js | 3 --- 2 files changed, 1 insertion(+), 24 deletions(-) (limited to 'src/components/emoji_input/emoji_input.js') diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index b365043c..46f04c60 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -139,8 +139,6 @@ const EmojiInput = { return this.modelValue.slice(this.caret) }, showSuggestions () { - console.log(this.focused) - console.log(this.suggestions) return this.focused && this.suggestions && this.suggestions.length > 0 && @@ -227,11 +225,8 @@ const EmojiInput = { input.addEventListener('click', this.onClickInput) input.addEventListener('transitionend', this.onTransition) input.addEventListener('input', this.onInput) + // FIXME LEAK input.addEventListener('scroll', (e) => { - console.log({ - top: this.input.scrollTop, - left: this.input.scrollLeft - }) this.$refs.hiddenOverlay.scrollTo({ top: this.input.scrollTop, left: this.input.scrollLeft @@ -278,12 +273,6 @@ const EmojiInput = { img: imageUrl || '' })) this.$refs.suggestorPopover.updateStyles() - }, - suggestions: { - handler (newValue) { - this.$nextTick(this.resize) - }, - deep: true } }, methods: { @@ -450,16 +439,12 @@ const EmojiInput = { } }) }, - onTransition (e) { - this.resize() - }, onBlur (e) { // Clicking on any suggestion removes focus from autocomplete, // preventing click handler ever executing. this.blurTimeout = setTimeout(() => { this.focused = false this.setCaret(e) - this.resize() }, 200) }, onClick (e, suggestion) { @@ -476,13 +461,11 @@ const EmojiInput = { } this.focused = true this.setCaret(e) - this.resize() this.temporarilyHideSuggestions = false }, onKeyUp (e) { const { key } = e this.setCaret(e) - this.resize() // Setting hider in keyUp to prevent suggestions from blinking // when moving away from suggested spot @@ -494,7 +477,6 @@ const EmojiInput = { }, onPaste (e) { this.setCaret(e) - this.resize() }, onKeyDown (e) { const { ctrlKey, shiftKey, key } = e @@ -541,12 +523,10 @@ const EmojiInput = { } this.showPicker = false - this.resize() }, onInput (e) { this.showPicker = false this.setCaret(e) - this.resize() this.$emit('update:modelValue', e.target.value) }, onClickInput (e) { diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index 5c536b74..eb55cfcc 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -501,7 +501,6 @@ const PostStatusForm = { if (target.value === '') { target.style.height = null this.$emit('resize') - this.$refs['emoji-input'].resize() return } @@ -588,8 +587,6 @@ const PostStatusForm = { } else { scrollerRef.scrollTop = targetScroll } - - this.$refs['emoji-input'].resize() }, showEmojiPicker () { this.$refs.textarea.focus() -- cgit v1.2.3-70-g09d2 From 518fcf856a63c5b50745a6549e10b228d27c10d3 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 9 Oct 2022 23:09:31 +0300 Subject: fix blinking popup --- src/components/emoji_input/emoji_input.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src/components/emoji_input/emoji_input.js') diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index 46f04c60..5131e699 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -258,7 +258,9 @@ const EmojiInput = { textAtCaret: async function (newWord) { const firstchar = newWord.charAt(0) if (newWord === firstchar) { - this.suggestions = [] + if (firstchar === ' ') { + this.suggestions = [] + } return } const matchedSuggestions = await this.suggest(newWord, this.maybeLocalizedEmojiNamesAndKeywords) -- cgit v1.2.3-70-g09d2 From 296a6fa4e3d14f0c8ca091870fd4f7e85bc34df8 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 9 Oct 2022 23:42:36 +0300 Subject: some shitty initial implementation of emoji picker with popover --- src/components/emoji_input/emoji_input.js | 36 ++--- src/components/emoji_input/emoji_input.vue | 5 +- src/components/emoji_picker/emoji_picker.js | 32 ++-- src/components/emoji_picker/emoji_picker.scss | 8 +- src/components/emoji_picker/emoji_picker.vue | 210 +++++++++++++------------- src/components/popover/popover.js | 6 + 6 files changed, 150 insertions(+), 147 deletions(-) (limited to 'src/components/emoji_input/emoji_input.js') diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index 5131e699..635251be 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -115,12 +115,12 @@ const EmojiInput = { caret: 0, focused: false, blurTimeout: null, - showPicker: false, temporarilyHideSuggestions: false, keepOpen: false, disableClickOutside: false, suggestions: [], - overlayStyle: {} + overlayStyle: {}, + pickerShown: false } }, components: { @@ -142,7 +142,6 @@ const EmojiInput = { return this.focused && this.suggestions && this.suggestions.length > 0 && - !this.showPicker && !this.temporarilyHideSuggestions }, textAtCaret () { @@ -285,8 +284,8 @@ const EmojiInput = { if (pickerInput) pickerInput.focus() }, triggerShowPicker () { - this.showPicker = true this.$nextTick(() => { + this.$refs.picker.showPicker() this.scrollIntoView() this.focusPickerInput() }) @@ -299,12 +298,16 @@ const EmojiInput = { }, 0) }, togglePicker () { + console.log('piick') this.input.focus() - this.showPicker = !this.showPicker - if (this.showPicker) { + if (!this.pickerShown) { + console.log('pick') this.scrollIntoView() + this.$refs.picker.showPicker() this.$refs.picker.startEmojiLoad() this.$nextTick(this.focusPickerInput) + } else { + this.$refs.picker.hidePicker() } }, replace (replacement) { @@ -441,6 +444,12 @@ const EmojiInput = { } }) }, + onPickerShown () { + this.pickerShown = true + }, + onPickerClosed () { + this.pickerShown = false + }, onBlur (e) { // Clicking on any suggestion removes focus from autocomplete, // preventing click handler ever executing. @@ -458,9 +467,6 @@ const EmojiInput = { this.blurTimeout = null } - if (!this.keepOpen) { - this.showPicker = false - } this.focused = true this.setCaret(e) this.temporarilyHideSuggestions = false @@ -523,27 +529,15 @@ const EmojiInput = { this.input.focus() } } - - this.showPicker = false }, onInput (e) { - this.showPicker = false this.setCaret(e) this.$emit('update:modelValue', e.target.value) }, - onClickInput (e) { - this.showPicker = false - }, - onClickOutside (e) { - if (this.disableClickOutside) return - this.showPicker = false - }, onStickerUploaded (e) { - this.showPicker = false this.$emit('sticker-uploaded', e) }, onStickerUploadFailed (e) { - this.showPicker = false this.$emit('sticker-upload-Failed', e) }, setCaret ({ target: { selectionStart } }) { diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue index 68498ef0..63bf856e 100644 --- a/src/components/emoji_input/emoji_input.vue +++ b/src/components/emoji_input/emoji_input.vue @@ -1,7 +1,6 @@ import('../sticker_picker/sticker_picker.vue')), Checkbox, - StillImage + StillImage, + Popover }, methods: { + showPicker () { + console.log('pick') + this.$refs.popover.showPopover() + this.onShowing() + }, + hidePicker () { + this.$refs.popover.hidePopover() + }, setGroupRef (name) { return el => { this.groupRefs[name] = el } }, setEmojiRef (name) { return el => { this.emojiRefs[name] = el } }, + onPopoverShown () { + this.$emit('show') + }, + onPopoverClosed () { + this.$emit('close') + }, onStickerUploaded (e) { this.$emit('sticker-uploaded', e) }, @@ -251,16 +263,6 @@ const EmojiPicker = { allCustomGroups () { this.waitForDomAndInitializeLazyLoad() this.filteredEmojiGroups = this.getFilteredEmojiGroups() - }, - showing (val) { - if (val) { - this.onShowing() - } - } - }, - mounted () { - if (this.showing) { - this.onShowing() } }, destroyed () { diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index 016c46d7..53363ec1 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -6,14 +6,10 @@ $emoji-picker-header-picture-height: 32px; $emoji-picker-emoji-size: 32px; .emoji-picker { + width: 25em; + max-width: 100vw; display: flex; flex-direction: column; - position: absolute; - right: 0; - left: 0; - margin: 0 !important; - // TODO: actually use popover in emoji picker - z-index: var(--ZI_popovers); background-color: $fallback--bg; background-color: var(--popover, $fallback--bg); color: $fallback--link; diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue index 57bb0037..ccd45bc1 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -1,129 +1,135 @@ diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index 60c42f0f..3474d354 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -63,6 +63,7 @@ const Popover = { // used to avoid blinking if hovered onto popover graceTimeout: null, parentPopover: null, + disableClickOutside: false, childrenShown: new Set() } }, @@ -234,6 +235,10 @@ const Popover = { }, showPopover () { if (this.disabled) return + this.disableClickOutside = true + setTimeout(() => { + this.disableClickOutside = false + }, 0) const wasHidden = this.hidden this.hidden = false this.parentPopover && this.parentPopover.onChildPopoverState(this, true) @@ -294,6 +299,7 @@ const Popover = { } }, onClickOutside (e) { + if (this.disableClickOutside) return if (this.hidden) return if (this.$refs.content && this.$refs.content.contains(e.target)) return if (this.$el.contains(e.target)) return -- cgit v1.2.3-70-g09d2 From 8fa1f0b50dcf51e976330163b819dfaf82d30a53 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 10 Oct 2022 00:33:58 +0300 Subject: move keepOpen to picker --- src/components/emoji_input/emoji_input.js | 2 -- src/components/emoji_picker/emoji_picker.js | 3 +++ 2 files changed, 3 insertions(+), 2 deletions(-) (limited to 'src/components/emoji_input/emoji_input.js') diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index 635251be..6532654f 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -116,7 +116,6 @@ const EmojiInput = { focused: false, blurTimeout: null, temporarilyHideSuggestions: false, - keepOpen: false, disableClickOutside: false, suggestions: [], overlayStyle: {}, @@ -344,7 +343,6 @@ const EmojiInput = { spaceAfter, after ].join('') - this.keepOpen = keepOpen this.$emit('update:modelValue', newValue) const position = this.caret + (insertion + spaceAfter + spaceBefore).length if (!keepOpen) { diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index d70abf5b..3fad4601 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -140,6 +140,9 @@ const EmojiPicker = { }, onEmoji (emoji) { const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement + if (!this.keepOpen) { + this.$refs.popover.hidePopover() + } this.$emit('emoji', { insertion: value, keepOpen: this.keepOpen }) }, onScroll (e) { -- cgit v1.2.3-70-g09d2 From d2fabe1a71207f92e10283fc5a881d883cb52ae1 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 10 Oct 2022 00:37:59 +0300 Subject: use anchor for picker --- src/components/emoji_input/emoji_input.js | 2 ++ src/components/emoji_picker/emoji_picker.js | 4 +++- 2 files changed, 5 insertions(+), 1 deletion(-) (limited to 'src/components/emoji_input/emoji_input.js') diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index 6532654f..eb64e054 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -141,6 +141,7 @@ const EmojiInput = { return this.focused && this.suggestions && this.suggestions.length > 0 && + !this.pickerShown && !this.temporarilyHideSuggestions }, textAtCaret () { @@ -205,6 +206,7 @@ const EmojiInput = { this.input = input this.caretEl = hiddenOverlayCaret suggestorPopover.setAnchorEl(this.caretEl) + this.$refs.picker.setAnchorEl(this.caretEl) const style = getComputedStyle(this.input) this.overlayStyle.padding = style.padding this.overlayStyle.border = style.border diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 3fad4601..e907def9 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -113,13 +113,15 @@ const EmojiPicker = { }, methods: { showPicker () { - console.log('pick') this.$refs.popover.showPopover() this.onShowing() }, hidePicker () { this.$refs.popover.hidePopover() }, + setAnchorEl (el) { + this.$refs.popover.setAnchorEl(el) + }, setGroupRef (name) { return el => { this.groupRefs[name] = el } }, -- cgit v1.2.3-70-g09d2 From 692342a77f1b91a88a30aadfd20994c293ad65e0 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 10 Oct 2022 20:11:04 +0300 Subject: focus search input when opening emoji picker --- src/components/emoji_input/emoji_input.js | 8 -------- src/components/emoji_picker/emoji_picker.js | 1 + src/components/emoji_picker/emoji_picker.vue | 1 + 3 files changed, 2 insertions(+), 8 deletions(-) (limited to 'src/components/emoji_input/emoji_input.js') diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index eb64e054..92c10f09 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -278,17 +278,10 @@ const EmojiInput = { } }, methods: { - focusPickerInput () { - const pickerEl = this.$refs.picker.$el - if (!pickerEl) return - const pickerInput = pickerEl.querySelector('input') - if (pickerInput) pickerInput.focus() - }, triggerShowPicker () { this.$nextTick(() => { this.$refs.picker.showPicker() this.scrollIntoView() - this.focusPickerInput() }) // This temporarily disables "click outside" handler // since external trigger also means click originates @@ -306,7 +299,6 @@ const EmojiInput = { this.scrollIntoView() this.$refs.picker.showPicker() this.$refs.picker.startEmojiLoad() - this.$nextTick(this.focusPickerInput) } else { this.$refs.picker.hidePicker() } diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index e907def9..d1372c4a 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -245,6 +245,7 @@ const EmojiPicker = { this.filteredEmojiGroups = this.getFilteredEmojiGroups() if (!oldContentLoaded) { this.$nextTick(() => { + this.$refs.search.focus() if (this.defaultGroup) { this.highlight(this.defaultGroup) } diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue index ccd45bc1..a2c99c16 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -71,6 +71,7 @@ class="form-control" :placeholder="$t('emoji.search_emoji')" @input="$event.target.composing = false" + ref="search" >
Date: Mon, 10 Oct 2022 20:26:32 +0300 Subject: better autocomplete handling, fix leak --- src/components/emoji_input/emoji_input.js | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) (limited to 'src/components/emoji_input/emoji_input.js') diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index 92c10f09..144b7c72 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -145,7 +145,7 @@ const EmojiInput = { !this.temporarilyHideSuggestions }, textAtCaret () { - return (this.wordAtCaret || {}).word || '' + return this.wordAtCaret?.word }, wordAtCaret () { if (this.modelValue && this.caret) { @@ -197,6 +197,12 @@ const EmojiInput = { return emoji.displayText } + }, + onInputScroll () { + this.$refs.hiddenOverlay.scrollTo({ + top: this.input.scrollTop, + left: this.input.scrollLeft + }) } }, mounted () { @@ -225,13 +231,7 @@ const EmojiInput = { input.addEventListener('click', this.onClickInput) input.addEventListener('transitionend', this.onTransition) input.addEventListener('input', this.onInput) - // FIXME LEAK - input.addEventListener('scroll', (e) => { - this.$refs.hiddenOverlay.scrollTo({ - top: this.input.scrollTop, - left: this.input.scrollLeft - }) - }) + input.addEventListener('scroll', this.onInputScroll) }, unmounted () { const { input } = this @@ -244,6 +244,7 @@ const EmojiInput = { input.removeEventListener('click', this.onClickInput) input.removeEventListener('transitionend', this.onTransition) input.removeEventListener('input', this.onInput) + input.removeEventListener('scroll', this.onInputScroll) } }, watch: { @@ -256,11 +257,10 @@ const EmojiInput = { } }, textAtCaret: async function (newWord) { + if (newWord === undefined) return const firstchar = newWord.charAt(0) if (newWord === firstchar) { - if (firstchar === ' ') { - this.suggestions = [] - } + this.suggestions = [] return } const matchedSuggestions = await this.suggest(newWord, this.maybeLocalizedEmojiNamesAndKeywords) @@ -292,10 +292,8 @@ const EmojiInput = { }, 0) }, togglePicker () { - console.log('piick') this.input.focus() if (!this.pickerShown) { - console.log('pick') this.scrollIntoView() this.$refs.picker.showPicker() this.$refs.picker.startEmojiLoad() -- cgit v1.2.3-70-g09d2 From 4a1ffced44c41be5c4ba60c5b8678b200c328a40 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 10 Oct 2022 22:04:49 +0300 Subject: fix unit tests --- src/components/emoji_input/emoji_input.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) (limited to 'src/components/emoji_input/emoji_input.js') diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index 144b7c72..3d3c58ac 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -211,8 +211,12 @@ const EmojiInput = { if (!input) return this.input = input this.caretEl = hiddenOverlayCaret - suggestorPopover.setAnchorEl(this.caretEl) - this.$refs.picker.setAnchorEl(this.caretEl) + if (suggestorPopover.setAnchorEl) { + suggestorPopover.setAnchorEl(this.caretEl) // unit test compat + this.$refs.picker.setAnchorEl(this.caretEl) + } else { + console.warn('setAnchorEl not found, are we in a unit test?') + } const style = getComputedStyle(this.input) this.overlayStyle.padding = style.padding this.overlayStyle.border = style.border -- cgit v1.2.3-70-g09d2 From 11f9a7ba2719ff4ddb84be39d9e83519c1d0f534 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 17 Oct 2022 21:23:25 +0300 Subject: update popover styles when caret updates --- src/components/emoji_input/emoji_input.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src/components/emoji_input/emoji_input.js') diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index 3d3c58ac..ba5f7552 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -278,7 +278,6 @@ const EmojiInput = { ...rest, img: imageUrl || '' })) - this.$refs.suggestorPopover.updateStyles() } }, methods: { @@ -536,6 +535,9 @@ const EmojiInput = { }, setCaret ({ target: { selectionStart } }) { this.caret = selectionStart + this.$nextTick(() => { + this.$refs.suggestorPopover.updateStyles() + }) }, resize () { } -- cgit v1.2.3-70-g09d2