3

I found this awesome repository on medium to have a multiSelectCombobox, and it works fine, but I wasn't able to pre-select values. https://github.com/svierk/awesome-lwc-collection/tree/main/force-app/main/default/lwc/multiSelectCombobox

and the son component: https://github.com/svierk/awesome-lwc-collection/tree/main/force-app/main/default/lwc/multiSelectComboboxItem

I tried this:

connectedCallback() {
    this.isDisabled = this.disabled || this.readOnly;
    this.hasPillsEnabled = this.showPills && !this.singleSelect;

    this.currentOptions = [{"value":"CH","label":"Check","selected":true},{"value":"USD","label":"Money","selected":true}];
    this.setSelection();
  }

And the result was that the pill-container and the label on the input show correctly with the count and the values. But, I have two problems:

  • The list don't show the icon that indicted that was selected;
  • When I clicked on other value of the list, the pre-selected don't show anymore, only the value that was selected show and stay on the variable

2 Answers 2

2

First of all thanks for mentioning and using my repo. The solution for preselecting picklist values is very simple and you can achieve it as follows:

Step 1

The combobox LWC is embedded in the HTML template of a parent LWC, from which it gets its selectable options, like:

<c-multi-select-combobox options={options} onchange={handleChange}></c-multi-select-combobox>

Step 2

In the parent component, the property "selected" must then only be set to true for those options that are to be preselected. In the following example, option 3 is preselected:

export default class ParentComponent extends LightningElement {
  options = [
    {
      label: 'Option 1',
      value: '1'
    },
    {
      label: 'Option 2',
      value: '2'
    },
    {
      label: 'Option 3',
      value: '3',
      selected: true
    }
  ];
}

Screenshot of the result:

enter image description here

However, there was indeed an error, so that the pill container was not displayed correctly on initial load. I have just fixed this in my repo as well. The connectedCallback of the LWC must look like this:

connectedCallback() {
  this.isDisabled = this.disabled || this.readOnly;
  this.hasPillsEnabled = this.showPills && !this.singleSelect;
  this.currentOptions = this.options;
}

And then also the pill container will show up correctly with the preselected values:

enter image description here

1

You haven't given me a lot of information to go on here, but here are some tips:

Call your setSelection method in the renderedCallback method. This is because it's likely needing to interact with actual markup which is often not present in the other callback.

renderedCallback(){
  if (!this.isInitialized) {
    this.setSelection();
    this.isInitialized = true;
  }
}

Also, make sure you have the singleSelect (single-select) param set to false.

Finally, I looked at the markup from the project and it's very outdated.

I've made you some example markup (adapted from the slds website but with with extras stuff removed and the proper lightning icons in place.

If you substitute this markup for your current markup, I'm sure it will work.

This of course needs to be done very carefully!!

<div class="slds-form-element">
  <label class="slds-form-element__label" >Your Label</label>
  <div class="slds-form-element__control">
    <div class="slds-combobox_container">
      
      <!-- note you'll need to add and remove slds-is-open here -->
      <div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open">
        
        <!-- input -->
        <div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
          <div role="combobox" tabindex="0" class="slds-input_faux slds-combobox__input slds-has-focus slds-combobox__input-value" >
            <span class="slds-truncate" >Options selected info here</span>
          </div>
          
          <!-- dropdown icon -->
          <span class="slds-icon_container slds-icon-utility-down slds-input__icon slds-input__icon_right">
            <lightning-icon icon-name="utility:down" size="x-small" alternative-text="Approved"></lightning-icon>
          </span>
          
        </div>
        
        <!-- dropdown -->
        <div class="slds-dropdown slds-dropdown_length-5 slds-dropdown_fluid" role="listbox" tabindex="0" >
          <ul class="slds-listbox slds-listbox_vertical" role="presentation">
            
            <!-- example selected item -->
            <li role="presentation" class="slds-listbox__item">
              <div class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-is-selected" role="option">
                <span class="slds-media__figure slds-listbox__option-icon">
                  <lightning-icon icon-name="utility:check" size="x-small" alternative-text="selected" class="slds-icon-utility-check slds-current-color slds-listbox__icon-selected slds-icon_container"></lightning-icon>
                </span>
                <span class="slds-media__body">
                  <span class="slds-truncate" title="Accounts">Item 1</span>
                </span>
              </div>
            </li>
            
            <!-- example unselected item -->
            <li role="presentation" class="slds-listbox__item">
              <div class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="option">
                <span class="slds-media__figure slds-listbox__option-icon"></span>
                <span class="slds-media__body">
                  <span class="slds-truncate" title="Contacts">Item 2</span>
                </span>
              </div>
            </li>
           
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Oh btw, here's my own multiselect item which has updated markup - but doesn't have all the features of the component you are using: MultiSelect

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .