Hi, why I can't use arrow key on my mention tooltip

[abanghendri]

Hi, I cannot use my arrow key up/down to select item on tribute js

I found the same behavior in this official playground which can't use arrow key to

What did you expect to happen?
the mentions suggestion should scroll up/down when we use arrow key up/down

What happened instead?
it doesn't scroll when we use arrow key, it only work when we use mouse to scroll

**this is my code

let isVerified = '';
      let whiteSpace = '';
      const tribute = new Tribute({
        values: debounce((text, cb) => this.searchMentions(text, cb), 500),
        lookup: 'name',
        fillAttr: 'name',
        menuContainer: this.$refs.currentCommentBox.querySelector('.mention-container'),
        positionMenu: false,
        // allowSpaces: false,
        menuItemTemplate(item) {
          if (item.original.isVerified === 1) {
            isVerified = '<i class="fa fa-check-circle text-success"></i>';
          } else {
            isVerified = '';
          }
          if (!item.original.description) {
            whiteSpace = '<span class="white-color">.</span>';
          } else {
            whiteSpace = '';
          }
          return `<img class="mention-avatar"
                    src="${item.original.avatar}">
                    <span
                      data-title="${item.original.description}"
                      data-uuid="${item.original.uuid}"
                      data-type="${item.original.type}"
                      data-name="${item.original.name}"
                      class="mention-tooltip2">
                      <span>
                        <b class="description-heading-2"> ${item.original.name} ${isVerified} </b>
                        <div class="description-body-2">
                          ${item.original.description}
                        </div>
                        ${whiteSpace}
                      </span>`;
        },
        selectTemplate(item) {
          return `<mark class="white"></mark><mark
                             contenteditable="false"
                             class="mention-node"
                             data-uuid="${item.original.uuid}"
                             data-type="${item.original.type}"
                             data-name="${item.original.name}">${item.original.name}</mark> `;
        },
      });
      tribute.attach(this.$refs.textComment);
      this.$refs.textComment.addEventListener('tribute-replaced', () => {
        this.updateContent(this.$refs.textComment);
      });
      // const isFF = !!navigator.userAgent.match(/firefox/i);
      const target = window.getSelection();
      // if (isFF) {
      this.$refs.textComment.addEventListener('keydown', (event) => {
        if (
          this.$refs.textComment.getElementsByTagName('mark').length ||
            this.$refs.textComment.getElementsByTagName('a').length
        ) {
          if (event.keyCode === 8 || event.keyCode === 46) {
            if (
              target.anchorOffset <= 1 &&
                target.focusNode.previousSibling != null
            ) {
              target.focusNode.previousSibling.parentNode.removeChild(
                target.focusNode.previousSibling,
              );
            }
          }

        }
      });
      // }
    },
    appendEmojiOnComment(emoji) {
      const selectEmoji = emoji.data.replace(/\u00a0/g, '');
      if (this.windowCurrentSelection === null) {
        const range = new Range();
        range.setStart(this.$refs.textComment, 0);
        this.windowCurrentSelection = range;
      }
      const newOffset = this.windowCurrentSelection.startOffset + selectEmoji.length;

      if (this.windowCurrentSelection.commonAncestorContainer.data) {
        const previousData = this.windowCurrentSelection.commonAncestorContainer.data;
        let newData = previousData.slice(0, this.windowCurrentSelection.startOffset);
        newData += selectEmoji;
        newData += previousData.slice(this.windowCurrentSelection.endOffset);
        this.windowCurrentSelection.commonAncestorContainer.data = newData;

        window.getSelection().collapse(
          this.windowCurrentSelection.commonAncestorContainer, newOffset,
        );
      } else {
        this.windowCurrentSelection.commonAncestorContainer.innerText =
          this.windowCurrentSelection.commonAncestorContainer.innerText.split('\n')[0] + selectEmoji;

        // placing caret to end of the text
        window.getSelection().collapse(this.windowCurrentSelection.commonAncestorContainer, 1);
        this.$refs.textComment.focus();
      }
      this.updateContent(this.$refs.textComment);

[weiweijiuzhao]

did you solve this problem, i have found same question