Programatically add/remove options from listbox ??

[naveen2593kumar]

Hello team,

I need to update the listbox at runtime, I see the listbox uses declarative approach like

<lion-listbox name="listbox" label="Default">
  <lion-option .choiceValue=${'Apple'}>Apple</lion-option>
  <lion-option checked .choiceValue=${'Artichoke'}>Artichoke</lion-option>
  <lion-option .choiceValue=${'Asparagus'}>Asparagus</lion-option>
  <lion-option .choiceValue=${'Banana'}>Banana</lion-option>
  <lion-option .choiceValue=${'Beets'}>Beets</lion-option>
</lion-listbox>

[jorenbroekema]

I'm not sure I understand what the question or point of discussion is? If you want to you can also create it with JS:

const listboxEl = document.createElement('lion-listbox');
listboxEl.name = 'listbox';
listboxEl.label = 'Default';

['Apple', 'Artichoke', 'Asparagus', 'Banana', 'Beets'].forEach(fruit => {
  const optionEl = document.createElement('lion-option');
  optionEl.choiceValue = fruit;
  optionEl.innerText = fruit;
  listboxEl.appendChild(optionEl);
});

Another way is using a Lit property + render update:

class FooElement extends LitElement {
  static get properties() {
    return {
      fruits: { attribute: false },
    }
  }

  constructor() {
    super();
    this.fruits = ['Apple', 'Artichoke', 'Asparagus', 'Banana', 'Beets'];
  }
 
  render() {
    return html`
      <lion-listbox name="listbox" label="Default">
        ${fruits.map(fruit => html`
          <lion-option .choiceValue=${fruit}>${fruit}</lion-option>
        `)}
      </lion-listbox>
    `;
  }
}

Then whenever the array of fruits is set to a new value (this.fruits = ...) LitElement will make sure the template is re-rendered with the needed changes.

[naveen2593kumar]

the problem is when I remove one/more fruit(s) assume 'Artichoke', then I see some weird changes, please refer below screenshots

* PRE

* POST

Also sorry to give half context, actually I want to wrap this listbox within my own component and still expecting the consumer to provide the options I tried slots within the listbox but it does not work

<listbox>
<slot name="all-options" />
</listbox>

it may be silly to do this way, please suggest me standard way of doing this.. Point to highlight is I can have multiple listboxes with in my component, so inheritence (extending a listbox) also not solves my problem

[jorenbroekema]

Hmm for the first problem this seems like a problem with lit-html not keeping track of the order of items by default e.g. if you use map(), but lit-html has a directive for that called the repeat directive, this may help you: https://lit-html.polymer-project.org/guide/writing-templates#repeating-templates

As for your slot interface in your wrapping component, something I'd probably try is using the slotchange event to detect changes, and then passing the assignedNodes from the user into my listbox component. That way the listbox component options is up to date always with the options passed by the user through the slot in your wrapping component. https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/slotchange_event. has more info on the event and also an example usage of assignedNodes.
There might also be an easier way but it's a little tricky to determine without knowing the context of your code fully.

[tlouisse]

I think the problem is the same as here: #1070 (comment)
Using the repeat directive, like Joren already suggested, should work.

[tlouisse]

Fixed by d94d6bd