Tribute container does not reopen after searching for a non-existing value

[lcwalther]

How can we reproduce this bug?

1. Step one Trigger the tribute component, e.g. by pressing "@"
2. Step two Type in a letter combination that exists in the values array, e.g. "Jor". "Jordan Hemphrey" is shown.
3. Step three Add an "f" so that you typed in "Jorf" which is a combination that does not exist in the values array. The tribute container disappears.
4. Step four Press backspace to delete the "f", so that only "Jor" is displayed.

What did you expect to happen? The tribute container should reappear, showing "Jordan Hemphrey", basically showing all available options starting with "Jor".

What happened instead? The tribute container does not reopen. The user has to delete the whole value "@Jor", even including the "@" symbol, and type it in again to retrigger the tribute container and search for another value.

Link (jsfiddle/plunkr/codepen) or Screenshot:

[NitzanShifrin]

Any progress with that?

[NitzanShifrin]

@hyojin, are you planning to work on it soon?

[hyojin]

@NitzanShifrin Hi, I did quickly go through the code and it seems it's intended behavior (at least with the current code). Unfortunately, I don't know the background of this 🤔

[mxgl]

I got around this with this code

 selectTemplate: function (item) {
    if(item) {
       return '@' + item.original.name;
    } else {
       // required to prevent lockup and console error when pressing enter/tab on no match found
       return '@' + this.current.mentionText;
    }
 },
 noMatchTemplate: function() {
    return '<li>No Match Found!</li>';
 },

change selectTemplate's first return to whatever you were returning before.

[mrsweaters]

@mxgl Should we update the default selectTemplate to return the current mentionText on no match?

[mxgl]

That's what I do

It creates a scenario where typing @abc<space> leaves the @abc in the textarea rather than erasing the mention entirely.

Edit: it seems this doesn't erase the mention, but rather prevents the console error saying that the item doesn't exist if you press Enter or Tab (I should read my own comments)

Also, having the noMatchTemplate defined by default keeps the menu open the entire time, allowing backspacing back to a search with results to function more smoothly!

[mxgl]

Can you make it return

return this.current.collection.trigger + this.current.mentionText;

In case there's a different trigger.

[mrsweaters]

Done!

[lcwalther]

@mrsweaters Sorry, I really appreciate the effort you put on this library but this did not fix the main bug. The problem is that the current behaviour is inconsistent when the noMatchTemplate returns an empty string (which is a requirement in my case, not to show the noMatchTemplate). When you type something that exists and you delete a character, the list of results is still shown but as soon you type a word that does not exist, the whole list is removed, even if it was the same word that returned results before. Is that inconsistency expected?

[mxgl]

@lcwalther is there a reason an empty noMatchTemplate is required?

You could try

noMatchTemplate: function () {
    return '<span style:"visibility: hidden;"></span>;
}

[mrsweaters]

@mxgl's workaround seems to work. I'll add that to the docs.

[lcwalther]

@mxgl @mrsweaters I tried it, but with this an empty list is shown instead of nothing at all, which is what I need in my case.

[mrsweaters]

Could you explain your use case a little bit more? Why do you need nothing rendering? You could add a class to it and set pointer-events: none if you are worried about someone interacting with it. Hmm, but that does leave the empty ul. That's what you want removed?

[lcwalther]

Yes, exactly, I want the ul removed because it looks like this, when using <span style:"visibility: hidden;"></span>:

Basically, I want the same behaviour as when e.g. mentioning users here in this comment window on Github.

[mrsweaters]

What if we add a class to the ul, like tribute-no-match so you can hide it?

[lcwalther]

Sorry for getting back to you so late @mrsweaters Would this class be only added to the ul when there is no match? Then this solution would be perfect!

[halloei]

What if we add a class to the ul, like tribute-no-match so you can hide it?

Looking forward to this, too!

[andersHj]

Hi, I still have some issues with this.

• I need to allowSpaces.
• I need the backspace to re-open the suggestions, but not until it has a match.
• I would like the noMatchTemplate to return null, but then backspace won't re-open suggestions.
• I use it in a textarea so I need enter click to create a newline. With the solution above editing the selectTemplate it would make it not break, but I would have to hit enter twice if there is a trigger anywhere in the textarea (before my newline), even if it is on a separate line.

codepen: https://codepen.io/andershj/pen/PoKGxYj?editors=1010

Any other way to get this to work?