[SalesForce] How to remove pills from lightning-pill-container

I believe I have identified an error in the LWC documentation for lightning-pill-container.

The javascript reads as follows:

Copying this into an org, the statement "this.items = items.splice(index, 1);" throws an error because "[items is not defined]".

import { LightningElement, track } from 'lwc';

export default class Basic extends LightningElement {
    @track items = [
        {
            label: 'a1'
        }, 
        {
            label: 'a2'
        }, 
        {
            label: 'a3'
        }
    ];

    handleItemRemove (event) {
        const name = event.detail.item.name;
        alert(name + ' pill was removed!');
        const index = event.detail.index;
        let items = this.items;
        items.splice(index, 1);
        this.items = items;
    }
}

Note that in addition to "items" not being defined, the code is wrong because splice has a side effect of modifying the array, but the return value is the removed elements.

If I rewrite the handleItemRemove function as follows, it does not throw an exception, but it also does not remove items when clicked (the alert is correctly displayed however).

handleItemRemove (event) {
    const name = event.detail.item.name;
    alert(name + ' pill was removed!');
    const index = event.detail.index;
    let items = this.items;
    items.splice(index, 1);
    this.items = items;
}

Best Answer

Replacing the offending line with one that uses filter works:

this.items = this.items.filter(item => item.name !== event.detail.item.name)

Related Solutions

LWC Lightning Pill Container – Fixing Redraw Issues When Adding Items

Child components only rerender when its tracked values change. When passing data structures down to child components, we're actually passing by reference, so the reference to the data structure needs to change. In other words, the child component needs to receive a new data structure.

In LWC, data structure mutations can cause components to rerender, but only for the component that owns said data structure. In your example, lightning-pill-container does not update upon mutations to the this.data array because those mutations happen in the c-app component.

I made some modifications to your playground example to illustrate this better: https://developer.salesforce.com/docs/component-library/tools/playground/v2VK0x6o_/2/edit

On a related note, it's a best practice to clone your data structures before passing them around because you don't want other components to mutate your data.

Salesforce LWC – Pre-Selected Rows with Pagination Not Working in Datatable

You need to keep a separate list of all selections in one variable, then update this variable accordingly as you navigate pages (and also keep track of any changes).

allSelectedRows = [];
preselectedRows = [];
changePage(pageNumber) {
    let pageData = this.getPageData();
    this.allSelectedRows = this.allSelectedRows
        .filter((rowId) => !pageData.find((record) => record.UserId === rowId)) // Preserve rows outside current page
        .concat(this.template.querySelector('lightning-datatable').selectedRows); // and add rows from current page
    this.page = pageNumber;
    pageData = this.getPageData();
    this.preslectedRows = this.allSelectedRows.filter(
        (rowId) => pageData.find((record) => record.UserId === rowId) // And now find records in current page
    );
}
onFirst() {
    this.changePage(1);
}
onNext() {
    this.changePage(this.page + 1);
}
// ... etc ...

Also, some general notes...

First, don't use await and then() together:

try {
// other code here
  let userList = await getUserList();
  // rest of code here
} catch(error) {
  this.error = error;
}
this.showLoadingSpinner = false;

Or:

getUserList().then(
  userList => {
    // success logic here
  })
  .catch(error => this.error = error)
  .finally(() => this.showLoadingSpinner = false);

Second, you really didn't need to JSON.serialize and JSON.parse, you can return the wrappers directly.

Related Topic

Lightning Web Components – Why Do SLDS Pills Always Have a Remove Button?