rapsacnz / multiselect

Same as my other AuraMultiSelect, except uses pills to show selected items.

MultiSelect

Same as my Aura MultiSelect, except uses pills to show selected items.

Update 2020-09-17

Renamed to MultiSelect from lwcMultiSelect as lwc now default. Will update code to not use pills if so desired.

Update 2020-09-16

Salesforce changed it's design system to make pills a block display, which means they don't work inside the multiselect, so I've added a custom pill component to this project - which means it can be used the same as before. This will be needed for all implementations of this component, as the change made by Salesforce completely breaks it.

Just add the new pill component, and add to the multiselect in place of the pill container, and everything else is the same.

To use in aura, add this markup:

<aura:attribute name="options" type="List" default="[
              {label:'Docksta table',value:'Docksta table',selected:false},
              {label:'Ektorp sofa',value:'Ektorp sofa',selected:false},
              {label:'Poäng armchair',value:'Poäng armchair',selected:false},
              {label:'Kallax shelving',value:'Kallax shelving',selected:false},
              {label:'Billy bookcase',value:'Billy bookcase',selected:false},
              {label:'Landskrona sofa',value:'Landskrona sofa',selected:false},
              {label:'Krippan loveseat',value:'Krippan loveseat',selected:false}]"/>

<c:MultiSelect label="Furniture" options="{!v.options}" onchange="{!c.handleSelectionChange}"></c:MultiSelect>

Handle in the controller like this:

handleSelectionChange(event){
  event.stopPropagation();
  const detail = event.detail;
  //semi-colon seperated string
  const selectedValue = detail.value;
}

I think that's all you need.

In action:

multiselect's Issues

Unable to retrieve selected options when embedding this component in LWC

I've embedded this in an LWC as below:

I can pass channelValues and channelNames in happily enough and present the option to the user but I'm unable to retrieve the selected options in the parent component

On exit from the component channelValues and ChannelNames are unchanged from the values passed in
The onchange handler returns an error when it gets invoked as being an invalid handler to use in this context
I've tried adding the notification handler in my parent component as per this documentation https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.events_handling but the event never gets triggered

My parent component handler has the following code (I've tried with and without the 'template' object):
constructor() {
super();
this.addEventListener('notification', this.handleNotification);
this.template.addEventListener("notification", this.handleNotification);
}

handleNotification = (event) => {
console.log("handleNotification - target:", target.value);
};

Combobox issue

The custom combobox is not displaying the list of options.Can you please here