materialize chips and the addChip() method - materialize

Question

I am using materialize chips in a typical "Publish Post" form where i use the chips for the tags field. All good.
Now, when i do the same in the almost identical "Edit Post" screen there is a difference, i call from the database the tags the post already has and i insert them in the element where the chips are inserted.
I solved already a couple of that idea's problems but when i want to delete a chip clicking the close icon it doesn't work, either if it's a pre-existing tag or it is a newly generated tag.
This behavior doesn't happen if I don't populate the chip's container with pre-existing tag/chips. So I have 2 options:
I keep trying to make the close icon work populating by myself the chip's container or
I use the addChip method, so probably if I let the plugin generate those pre-existing tag/chips all is going to be fixed.
My problem with the second option is I have no idea how could I make that method work in my code.
Option 1
<div id="chips1" class="chips chips-placeholder input-field">
#foreach($tags as $tag)
<div class="chip" data-tag="{{$tag}}" tabindex="0">{{$tag}}
<i class="material-icons close">close</i>
</div>
#endforeach
</div>
Option 2 (without the foreach populating the div)
<div id="chips1" class="chips chips-placeholder input-field">
</div>
and the JS
/* I initialize the chips with a onChipAdd method
and onDelete method to keep the variable updated */
var val = [];
$('#chips1').chips({
placeholder: 'Etiquetas...',
secondaryPlaceholder: '+Etiqueta',
onChipAdd: function () {
val = this.chipsData;
console.log(val);
},
onChipDelete: function() {
val = this.chipsData;
console.log(val);
}
});
/* ***************************************** */
/* Here populate the hidden input that is going to deliver the
data with the pre-existing chips of Option 1 */
var chipsArr = [];
var chipis = $('#chips1 div.chip');
for (let index = 0; index < chipis.length; index++) {
chipsArr.push($(chipis[index]).data('tag'));
}
$('#chips-values').val(JSON.stringify(chipsArr));
/* ***************************************** */
/* Here i push to the array the newly added tags with the val variable */
$('#publishSubmit').on('click', function (e) {
e.preventDefault();
for (let index = 0; index < val.length; index++) {
chipsArr.push(val[index].tag);
}
$('#chips-values').val(JSON.stringify(chipsArr));
console.log($('#chips-values').val());
$('form#postPublish').submit();
});

Answer 1

I know your question is already a while ago, but maybe it will help you nevertheless. I come across the exact same problem and solved it as follows:
I created the chip container as follows:
<div id="chips" class="chips-placeholder"></div>
<div id="chips_inputcontainer"></div>
Then I created hidden inputs foreach existing chip in the database inside of the "chips_inputcontainer".
For example like this:
<div id="chips_inputcontainer">
<?php foreach($chips as $chip): ?>
<input type='hidden' name='chip[previous][<?php echo $chip['id'] ?>]' value='<?php echo $chip['text'] ?>'>
<?php endforeach; ?>
</div>
At the end, I initalized the chip input with the following JavaScript Snipped:
<script>
$('#chips').chips({
placeholder: 'Enter a tag',
secondaryPlaceholder: '+Tag',
onChipAdd: function(e, chip){
$("#chips_inputcontainer").append("<input type='hidden' name='chip[new][]' value='" + chip.innerHTML.substr(0, chip.innerHTML.indexOf("<i")) + "'>");
},
onChipDelete: function(e, chip){
$('#chips_inputcontainer input[value="' + chip.innerHTML.substr(0, chip.innerHTML.indexOf("<i")) + '"]').val('**deleted**');
},
data: [
<?php foreach($chips as $chip): ?>
{tag: '<?php echo $chip['text'] ?>'},
<?php endforeach; ?>
],
});
</script>
This snippet creates every time when a new chip is added a hidden input with the necessary data.
And every time, when a chip is deleted, the value of the hidden input field is set to **deleted**
And so I know:
which tags are new to the database
which ones are existing ones
which id do the existing ones have in the database
which ones are deleted
I hope, this will help you.