tagify.loadOriginalValues removes "<Something>" from parameter passed

[FreshDoktor]

• I am running the latest version
• I checked the documentation and found no answer (Nothing in the docu for 'loadOriginalValues' gives an clue that HTML Tag like Text gets removed the input should accept like in the running demo)
• I checked to make sure that this issue has not already been filed

Hi :) I have the same problem as #1227. I also have a working js bin for the problem. It seems like something in the method “loadOriginalValues” removed text that starts with the < char. You can see the input should contain the text but the text is missing. Also if you try to input any text that include this whole part will be missing if the text is put into the method after onChange.

At this moment jsbin is unfortunately down after I tried to save the demo, but I was able to copy the js of the minimal live demo html was unchanged.

var input = document.querySelector('input')
var tagify;
tagify = new Tagify(input, {
  mode: 'mix',
    editTags: false,
    pattern: /\$/,
    tagTextProp: 'text',
    placeholder: this.placeHolder,
    backspace: true,
    autoComplete: {
      enabled: true,
      rightKey: true
    },
    mixMode: {
      insertAfterTag: ''
    },
    dropdown: {
      enabled: 1,
      position: 'text',
      mapValueTo: 'text',
      highlightFirst: true
    },
  callbacks: {
    change: (event) => {
      tagify.loadOriginalValues(event.detail.value)
    }
  }
})

tagify.on('change', console.log)

tagify.loadOriginalValues('here <not-here> also here')

I need to call this method because I need to map between your tags within the string to a different format that our backend can work with (and vice versa). So I need this call so that I can get a string from the backend, map it and then put it back into the input field.

Maybe there is a workaround so i can update the input without this method?

For Example:
Backend is sending String -> "User (${User}) is using this Input."
And the loadOriginalValues is getting this resolved string -> "User ([[{"id":1957,"value":"User","title":"U00000","prefix":"$"}]]) is using this Input."

I hope this is enough info, if not feel free to ask. :) Thanks in advance

[yairEO]

Hi, I don't understand... sorry. it doesn't matter what the backend is sending. it only matters how are you setting up your Tagify component.

I don't understand why are you setting tagTextProp: 'text' but your tags don't have any text property:

[[{"id":1957, "value":"User", "title":"U00000", "prefix":"$"}]]

do not use id. use only value (as your unique id). map it to whatever you when before you send it back to your backend. Tagify doesn't know what id is.

[FreshDoktor]

tbh today I'm not sure where exactly I saw in the string that it has an id property, actually it just has “value” and “title” ... it was Friday afternoon, my brain wasn't working properly anymore i guess.
But even after I removed tagTextProp or set it to value, when I put “[[{”value“: ‘User’, ‘title’: ‘U000000’}]]sad<KEY_UP>” into the method, the input contains everything except “<KEY_UP>” afterwards.

Also if i remove "tagTextProp" from the bin (https://jsbin.com/maquzusoza/edit?html,js,output) and the problem still persist. If you start Typing anything directly after an '<' it just disappears

[FreshDoktor]

Perhaps to summarize the problem again. If i enter any text into the method “loadOriginalValues” to display this text in the Tagify input. If this string contains '' only the part between < and > disappears. In other words, I enter 'Test ' in the method to display this text in the input, but the input then only contains 'Test' and the has apparently been removed from the method.

The Working Example shows that. I call tagify.loadOriginalValues('here <not-here> also here') but the content of the output input is "here also here"