Initialize Selection in for:each Loop

[mstohr1975]

Hi there,

I am using the lookup component within a template for:each, generating multiple entries based on a number of items. Using data-id property I can identify via querySelector the underlying component in the onsearch and onselectionchange handlers. But not sure how I can achieve the initialization of the search field. Background: I want to use it in edit mode where user might have selected results for some of the lookups and stored in database.

<template for:each={nDestinations} for:item="d">
            <c-lookup key={d.n} class={d.class} data-id={d.n} selection=? errors={errors} onsearch={handleSearch} onselectionchange={handleSelectionChange} label={d.label} required="true" placeholder={d.placeholder}>
            </c-lookup>
</template>

Is there any option to call a handler to set the initial selection? That way I could use the event passed to identify the underlying c-lookup. Alternatively, can I trigger the selection handler in parent constructor? Or maybe pass in a parameter into the Lookup class to set a class member?

Many thanks for your thoughts and feedback.

P.S. Moreover I get some validation errors related to deprecated CSS classes, namely class="slds-listbox__option-text" and class="... slds-listbox__option-meta_entity". I guess, this leads to the fact that the lookup field is slightly larger than other fields in my input form.

[mstohr1975]

P.P.S. I tried it in the renderedCallback of the parent component and can get the c-lookup by querySelector...but then how to set the initial value?

[pozil]

Hi @mstohr1975, thanks for reaching out. You can set individual initial selections by simply applying the same technique you used for the other attributes: make this information part of your nDestinations array and use it in the template.

For example:

nDestinations = [
  {
    n: 'key1',
    label: 'Label 1',
    selection: [ a, b, c ],
    ...
  },
  {
    n: 'key2',
    label: 'Label 2',
    selection: [ d, e ],
    ...
  }
];

and then:

<template for:each={nDestinations} for:item="d">
  <c-lookup key={d.n} class={d.class} data-id={d.n} selection={d.selection} errors={errors} onsearch={handleSearch} onselectionchange={handleSelectionChange} label={d.label} required="true" placeholder={d.placeholder}>
  </c-lookup>
</template>

[mstohr1975]

Philippe, many thx for your quick and helpful feedback...obviously, this was it. 🙏
Love the great contribution you do here!

[mstohr1975]

Close this one.