Expected behavior

Events will be fired when chips are added or deleted

Actual behavior

Chips instance loads and works as expected from a UI perspective but no events are ever fired

Resources (screenshots, code snippets etc.)

HTML:

<div class="chips chips-placeholder chips-input"></div>

JS:

<script>
const chips = document.querySelector('.chips');

const chipsInput = new mdb.ChipsInput(chips, {
    labelText: 'Picknotes',
    inputID: 'picknotes',
});

const myChips = document.getElementById('picknotes');

myChips.addEventListener('add.mdb.chips', (e) => {
    console.log('Before chip added:', e.detail);
    alert(`Chip added: ${e.detail.value}`);
});

myChips.addEventListener('added.mdb.chips', (e) => {
    console.log('Chip added successfully:', e.detail);
    alert(`Chip successfully added: ${e.detail.value}`);
});

myChips.addEventListener('delete.mdb.chips', (e) => {
    console.log('Chip deleted:', e.detail);
    alert(`Chip deleted: ${e.detail.value}`);
});