Why isn't lightning-combobox actually setting the value to the selection?

Question

I have a combobox in a modal dialog that looks like this:

    <template if:true={showAddTagDialog}>
        <section
            role="dialog"
            tabindex="-1"
            aria-labelledby="modal-heading-02"
            aria-modal="true"
            aria-describedby="modal-content-id-2"
            class="slds-modal slds-fade-in-open"
        >
            <div if:true={showExistingTags} class="slds-modal__container">
                <header class="slds-modal__header">
                    <h2 class="slds-modal__title slds-hyphenate">Assign Tag</h2>
                </header>
                <div class="slds-modal__content slds-p-around_medium">
                    <lightning-combobox
                        name="tag"
                        placeholder="Select Tag"
                        variant="label-hidden"
                        value={tagMenuSelection}
                        onchange={handleTagMenuChange}
                        options={tagMenuOptions}
                    >
                    </lightning-combobox>
                </div>
                <footer class="slds-modal__footer">
                    <lightning-button
                        label="Cancel"
                        onclick={handleCancelAssignTag}
                    >
                </footer>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </template>

Everything works except when I click the combobox and select a value, the value isn't put into the combobox. It still shows the placeholder. handleTagMenuChange does get fired, and event.detail holds {value: null}.

tagMenuSelection is just a property on the component that's initialized to an empty string.

tagMenuSelection = '';

tagMenuOptions calls an Apex method to get the tags that the current user should see. After the call it looks like this:

[
    {name: "onhold", label: "#On Hold"},
    {name: "toppriority", label: "#Top Priority"},
    {name: "expiringsoon", label: "Expiring Soon"},
    {name: "firsttimebuyer", label: "First Time Buyer"},
    {name: "old", label: "Old"},
    {name: "pendingapraisal", label: "Pending Apraisal"},
    {name: "push", label: "Push"}
]

These options successfully appear in the menu.

handleTagMenuChange:

handleTagMenuChange(event) {
    this.tagMenuSelection = event.detail.value;
    console.log(this.tagMenuSelection);
}

The console just outputs null.

Why does making a selection in the combobox fire the onchange handler but doesn't actually change the value?

Answer 1

You need to change your name key attributes to value, since the lightning-combobox allows

[{value: 'something; label: 'something'}]