Issue with multiple comboboxes

All we need is an easy explanation of the problem, so here it is.

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

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 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;
    }
}

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Tags: ,

Leave a Reply