Vue Bootstrap Dropdown + emoji-mart-vue

Question

Нужно следующее: сделать dropdown, в котором содержится блок Picker'а (emoji-mart-vue)

С этим кодом все работает:

            <b-dropdown variant="secondary" no-caret right class="emoji-dropdown">
                <template #button-content>
                    <i class="far fa-smile-beam"></i>
                </template>
                <Picker :data="emojiIndex" set="apple" @select="pickEmoji" title="Выберите эмодзи" emoji="grinning" emojiTooltip :i18n="emojiPickerI18n" @click.prevent></Picker>
            </b-dropdown>

Но есть одно но: при нажатии на любой эмодзи dropdown закрывается. Как можно сделать так, чтобы этого не происходило? При этом, чтобы остальное поведение dropdown сохранилось (когда кликаешь в него него или на кнопку, которая его вызывает, он скрывался).

P.S. как видно в коде выше, я пробовал @click.prevent и другие модификаторы событий, но это не возымело нужного эффекта

Answer 1

Сделал страницу только с dropdown и пикером, как оказалось, закрытие пикера триггерит вовсе не выбор эмодзи. Дело в том, что при выборе эмодзи у меня устанавливается фокус на текстовое поле, что и триггерит закрытие dropdown. Пришлось сделать небольшой костыль, но теперь в целом все работает:

<b-form-textarea placeholder="Введите сообщение" ... @focus="messageInputInFocus = true" @blur="messageInputInFocus = false"></b-form-textarea>
...
<b-dropdown variant="secondary" no-caret right class="emoji-dropdown" @hide="onEmojiDropdownHide" @show="onEmojiDropdownShow">
    <template #button-content>
        <i class="far fa-smile-beam"></i>
    </template>
    <template #default>
        <Picker :data="emojiIndex" set="apple" @select="pickEmoji" title="Выберите эмодзи" emoji="grinning" emojiTooltip :i18n="emojiPickerI18n"></Picker>
    </template>
</b-dropdown>

<script>
    ...
    export default {
        components: { ..., BFormTextarea, BDropdown, Picker },
        data() {
            return {
                ...,
                preventEmojiPickerHide: false,
                messageInputInFocus: false
            }
        },
        methods: {
            pickEmoji(emoji) {
                ...
                this.preventEmojiPickerHide = true;
                this.$refs.messageInput.focus();
                ...
            },
            onEmojiDropdownHide(bvEvent) {
                if (this.preventEmojiPickerHide) {
                    bv.preventDefault();
                    this.preventEmojiPickerHide = false;
                }
            },
            onEmojiDropdownShow() {
                if (this.messageInputInFocus) {
                    this.preventEmojiPickerHide = true;
                    setTimeout(() => { // $nextTick срабатывает до потери фокуса, так что пришлось через setTimeout
                        this.$refs.messageInput.focus();
                    }, 0);
                }
            }
        }
    }
</script>

БЛОГ НА HUSL

Vue Bootstrap Dropdown + emoji-mart-vue

Ответы (1 шт):