Autocomplete tag with prefix not properly added on first attempt in Mix-Mode

[FreshDoktor]

Prerequisites

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed

💥 Demo Page

https://jsbin.com/vogabovodo/1/edit?js,console,output

Explanation

• What is the expected behavior?
  When I select a tag from the dropdown with a mouse click, it should be present in the value of the change event.

• What is happening instead?
  The tag is only present in the change event after the second attempt to add the tag by clicking in the dropdown.

• Steps to reproduce with the demo

1. Write $b into the input.
2. Select banana from the dropdown with a mouse click.
3. Delete the b and write it again to open the dropdown again.
4. Select banana again.
5. Check the event values in the console output. The output should contain two messages:
   "$b"
"​[[{\"value\":\"banana\",\"prefix\":\"$\"}]]"

• What i already tried

1. Using another pattern

[yairEO]

Hi, in your onChange event listener:

change: (event) => {
  console.log(event.detail.value)
  tagify.loadOriginalValues(event.detail.value)
}

Why are you calling loadOriginalValues?
I don't see why would you ever do something like this as it resets your tagify field when a tag is selected, and regardless, why would you want to reset it?

[FreshDoktor]

Because the string can be in an unmapped format that tagify won't recognize. Some user likely typing ${PLACEHOLDER} instead of using the autocompletion (Because it was the way before we implemented your lib). If thats the case i need to change the string so it contains the tag the way tagify needs it. Also the Hovertext (It shows what the placeholder will be replaced with) can change. So i update the String that the hover text change accordingly. Then after mapping i need to use that method that the input shows the tags correctly. I can send a gif how the input would react without it if needed on monday.

What the workflow looks like

1. onChange calls a method that uses the value (event.detail.value)
2. That Method checks if the value contains an Placeholder that our backend can understand ${Placeholder}
3. It looks up if we have a Placeholder with that name and replace it with "[["value":"PlaceholderName","title":"Hovertext"]] (Or the other way arround i am not sure)
4. Then i passed this mapped string into loadOriginalValues

So i just get what the user typed in -> do stuff with it -> return it to tagify