Chips event listeners


Topic: Chips event listeners

Lewis pro premium priority asked 10 months ago

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}`);
});


Kamila Pieńkowska staff answered 10 months ago

I've adjusted your code and created snippet out of it: https://mdbootstrap.com/snippets/standard/kpienkowska/6339469?view=side


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 8.1.0
  • Device: Custom
  • Browser: Edge
  • OS: Windows 11
  • Provided sample code: No
  • Provided link: No