Setting selected value of a lightning-combobox does not show when inside a <template for:each> tag

Question

I have a LWC that displays anywhere from 1 to n lightning-combobox components. Since the number of combo boxes needed is unknown, the combo boxes are within a for:each directive:

    <template for:each={refFields} for:item="fld">
       <lightning-combobox key={fld.id} name={fld.inpt} label={fld.label} value={fld.inpt} 
          placeholder={fld.ph} options={fld.options} onchange={updateInputs} 
          variant="label-inline"></lightning-combobox>
   </template>

Everything is working fine except that when I set fld.inpt to a previously saved value it does not display in the combobox as the selected value even though the value of fld.inpt matches one of the values in fld.options. Instead the combobox looks like nothing has been selected yet.

I believe the issue is due to the fact that the combobox is within the for:each because I have other comboboxes on the same LWC and setting those previously selected values does display correctly.

Has anyone done this before and come across the same issue?

Thank you

Answer 1

I ended up figuring this out. Basically it was a timing issue. The selectable options in the combo box are the lookup relationship fields from an sObject that the user selects. At the same time, any previously saved values are loaded into the fields. I expected the combo box options would be loaded by the time the saved values are loaded but it turned out not to be the case. So I had to move some things around to ensure that things were loaded in the correct order.