lightning-combobox throwing error on selection

Question

I have a lightning-combobox which gives the options to select a field from an fetched apex collection. The component loads without any issue on the page as soon as I select an option I get a page error. When I check the details there is an error : [NoErrorObjectAvailable] Script error.

For the sake of excluding if its the controller I just added a console.log which does not give an output suggesting the error is in the lightning-combobox. What am I doing wrong

Template:

<lightning-combobox options={salesforceFields} data-target-id="lcSF" label="Field" value="" onchange={handlesffields}>
        <template for:each={SFFields} for:item="SFField">
            <option label={SFField.label} value={SFField.value} selected={SFField.selected} key={SFField}></option>
        </template>
    </lightning-combobox>

Js

handleSFFields() {
        console.log('Oops');
}

Thanks in advance

Answer 1

Try this.

<lightning-combobox
   name="Field"
   label="Field"
   value={value}
   placeholder="Select Field"
   options={salesforceFields}
   onchange={salesforceFields} >
</lightning-combobox>

value = 'your selected value';

salesforceFields(event) {
console.log(event.detail.value); }