1

I have an lwc that displays content differently based on data type, filterField.html (simplification):

<template> <div if:true={isText}> <lightning-input value={_value} variant="label-hidden" onchange={sendValue}></lightning-input> </div> <div if:true={isCheckbox}> <lightning-input type="checkbox" value={_value} checked={_value} variant="label-hidden" required={isRequired} onchange={sendValue}></lightning-input> </div> <div if:true={isPicklist}> <lightning-combobox value={_value} options={_options} variant="label-hidden" placeholder="--None--" onchange={sendValue}></lightning-combobox> </div> </template>

css:

:host { display: table-cell; }

This component is nested inside another lwc like this:

<table> <template for:each={filters} for:item="field"> <tr key={field.index}><td> <c-filter-field name={field.name} type={field.type} value={field.value} options={field.options} onvaluechange={filterChange}> </c-filter-field> </td></tr> </template> </table>

When nested component displays lightning-combobox, expanding/collapsing it causes this error:

Error: [LWC error]: Invalid "key" attribute value in "<lightning-base-combobox-item>" in [object:vm LightningBaseCombobox (26)] for item number 0. Set a unique "key" value on all iterated child elements. <lightning-base-combobox> <lightning-combobox> <c-filter-field> at log (aura_proddebug.js:5929:17) at logError (aura_proddebug.js:5937:7) at i (aura_proddebug.js:9289:15) at tmpl (baseCombobox.js:295:49) at aura_proddebug.js:9881:29 at ReactiveObserver.observe (aura_proddebug.js:5817:15) at isUpdatingTemplate (aura_proddebug.js:9837:15) at runWithBoundaryProtection (aura_proddebug.js:10696:7) at evaluateTemplate (aura_proddebug.js:9830:7) at invokeComponentRenderMethod (aura_proddebug.js:9983:43)

The error doesn't break anything, my solution still works as expected. I ensured that the key value is unique. I tried adding the key value to c-filter-field and every other relevant tag(including inside the child itself). I, also, tried using nested component as table-row rather than cell. The error still refuses to go away.

There are no issues with other data types, even when changing values.

I am convinced that it's an lwc bug around lightning-combobox but was wondering, if I am missing something after all.

Improve this question

2 Answers 2

Reset to default
2

This error is coming from the lightning-combobox component rather than your custom component. I'd suggest debugging the code that creates the options array as it appears you haven't set the value property or there are duplicates within that array

Improve this answer
2
  • Thanks for the reply. The issue is indeed coming from lightning-combobox. Value is set correctly. There are no duplicates in options, in fact there cannot be any as options are coming from as Set. The error happens every time I change a picklist option, even though it all works. Default value shows on the picklist. Changing value works as well including onchange event that uses the value for other purposes. Everything works as expected, it's a really odd one. Commented Aug 29, 2022 at 10:43
  • @Arhael I just got a similar error and in my case I was filling the options property with a getter. So, every time the getter was fired, the whole set was readded to the options property, hence, having it double. Maybe you have something alike on your side? Commented Sep 5, 2023 at 15:20
0

@Moonpie is correct here - this issue is most likely caused by a null value in one of your select options.

Consider using empty string '' instead and you'll be fine.

Incorrect:

this.contactTypeOptions.unshift({ label: "--None--", value: null});

Correct:

this.contactTypeOptions.unshift({ label: "--None--", value: ''});
Improve this answer

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.