Issue with multiple comboboxes

Question

I'm writing an LWC code that has 2 combo boxes in it. The condition is like this.

Whatever value is selected in combo box 1 should not appear in Combo box 2. Here is my code.

HTML

<template>
    <lightning-combobox
            name="progress"
            label="Status"
            value={value1}
            placeholder="Select Progress"
            options={options}
            onchange={handleChange1} ></lightning-combobox>

    <lightning-combobox
            name="progress"
            label="Status"
            value={value2}
            placeholder="Select Progress"
            options={options}
            onchange={handleChange2} 
            disabled={isDisabled}></lightning-combobox>

</template>

JS

import { LightningElement, track } from 'lwc';

export default class ComboboxBasic extends LightningElement {
    @track value = '';
    @track isDisabled = true;
    @track options = [
        { label: 'New', value: 'new' },
        { label: 'In Progress', value: 'inProgress' },
        { label: 'Finished', value: 'finished' },
    ];


    handleChange1(event) {
        this.value = event.detail.value;
        this.isDisabled = false;
        this.options = this.options.filter(d => d.value != this.value);
    };

    handleChange2(event) {
        this.value = event.detail.value;
    }
}

Here I face 2 issues.

1. When I keep selecting the values from combo box 1, they are getting disappeared from the combo box options.
2. whatever value I select in combo box 1 is not shown there.

Here is the playground link that can give you more understanding. https://developer.salesforce.com/docs/component-library/tools/playground/tMi2acFMR/5/edit

please let me know where am I going wrong.

Thanks

Answer 1

You need to maintain 2 different options list. One for combobox 1 and another for combo box 2.

<template>
    <lightning-combobox
            name="progress"
            label="Status"
            value={value1}
            placeholder="Select Progress"
            options={options}
            onchange={handleChange1} ></lightning-combobox>

    <lightning-combobox
            name="progress"
            label="Status"
            value={value2}
            placeholder="Select Progress"
            options={options2}
            onchange={handleChange2} 
            disabled={isDisabled}></lightning-combobox>

</template>

JS Controller

import { LightningElement, track } from 'lwc';

export default class ComboboxBasic extends LightningElement {
    @track value = '';
    @track isDisabled = true;
    @track options = [
        { label: 'New', value: 'new' },
        { label: 'In Progress', value: 'inProgress' },
        { label: 'Finished', value: 'finished' },
    ];

    @track options2 = []

    handleChange1(event) {
        this.value = event.detail.value;
        this.isDisabled = false;
        this.options2 = this.options.filter(d => d.value != this.value);
    };

    handleChange2(event) {
        this.value = event.detail.value;
    }
}