Use '@' as selectTemplate case menu position error.

[a365344743s]

How can we reproduce this bug?

1. config as below.

{
  values: [
    {
      key: "Jordan Humphreys",
      value: "Jordan Humphreys",
    },
    {
      key: "Sir Walter Riley",
      value: "Sir Walter Riley",
    }
  ],
  replaceTextSuffix: '',
  requireLeadingSpace: false,
  selectTemplate(item) {
    return '<span contenteditable="false">' + '@' + item.original.value + "</span>";
  }
}

2. Tap @ and choose one item
3. Tap LeftArrow on keyboard
4. Tap RightArrow on keyboard

What did you expect to happen? Do not show menu or fix menu position.

What happened instead? Menu show at left-top.

Screenshot:

I think the '@' mark in selectTemplate cause this problem.

[mrsweaters]

Oh interesting, so if you get rid of the @ symbol, the problem goes away?

[a365344743s]

Oh interesting, so if you get rid of the @ symbol, the problem goes away?

Yes, if i remove @ symbol in selectTemplate, everything is ok.

[lhb12345]

How do you keep @ to solve this problem？

[a365344743s]

How do you keep @ to solve this problem？

We just remove show @.

[lhb12345]

How can we solve this problem if we keep the @ on display。I need to keep the @ on display

[lhb12345]

And the trigger is also @

[lhb12345]

How can we solve this problem if we keep the @ symbol in selectTemplate。what should I do? @mrsweaters @a365344743s

[Jony1943]

@lhb12345 我在React中是这么解决的

this.refs.input.addEventListener("tribute-active-true", (e) => {
    setTimeout(() => {
        const tributePanels = document.getElementsByClassName('tribute-container');
        const lastPanel = tributePanels[tributePanels.length - 1];
        const { left, top } = lastPanel.style;
        if (left === '0px' || top === '0px') {
            lastPanel.style.display = 'none';
        }
    }, 10);
});