2

When using a pill container (lightning-pill-container) containing pills with href attribute to link to a URL the itemremove handler seems to fire twice.

Example in Playground is provided here.

Expected behaviour: The onitemremove event should only fire once and remove only the pill which is being clicked

Actual behaviour: The onitemremove event fires twice with the same event.detail.index and removes two pills - the original pill plus whatever pill happens to now occupy the same index in the array after filtering/splicing

NB: this behaviour only seems to occur when the href attribute is present in the pill collection. If you remove this attribute the itemremove event behaves correctly

Also please note this is a different issue to that reported in the following questions as it relates specifically to the href attribute being present:

how-to-remove-pills-from-lightning-pill-container

lwc-lightning-pill-container-does-not-redraw-when-adding-items

The example code is shown below:

HTML template

<template>
    <lightning-card title="lightning-pill-container">
        <div class="slds-p-horizontal_small">
            <lightning-pill-container items={items} 
                onitemremove={handleItemRemove}>
            </lightning-pill-container>
        </div>
    </lightning-card>
</template>

JS File

import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {
    @track items = [
        {
            label: 'a1', href: 'www.google.com'
        }, 
        {
            label: 'a2', href: 'www.amazon.com'
        }, 
        {
            label: 'a3', href: 'www.news.com'
        }
    ];

    handleItemRemove(event) {
        const index = event.detail.index;       
        const _item = this.items;
        _item.splice(index, 1);        
        this.items = [..._item];        
    }
}
0

This appears to be a bug. However this is happening only when the items are modified in same transaction. So, as a work-around until this bug is fixed, we can separate the transaction in Javascript using setTimeout:

handleItemRemove(event) {
    setTimeout(() => {
        this.items = this.items.filter((item) => item.label !== event.detail.item.label);
    });
}

Playground Example

| improve this answer | |
  • Thanks - that's a great workaround! – Devst Aug 22 '19 at 6:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.