How to refresh dependent dual listbox in LWC

Question

The attached image is an LWC, in which Category is a controlling picklist (Combobox) and Sub Categ is the Dependent Picklist.

Eg. Category 1: Sub Categ 1,2,3 Category 2: Sub Categ 2,3

I am storing Selected Sub Category values in an array and I want to use it further. The array variable is set with selected values in the onChange method of dual-listbox.

Here the problem is initially if I select Category=1 and Select Sub Category = 1,2,3. But then I remember oh I wanted to select Category = 2

Here what happens is when I change the Category, Sub Category selected values automatically changed to 2,3. But I am not able to set those values to an array variable. The array will still hold previous values 1,2,3

Answer 1

You can either wait a tick and update the value, or you can manually filter the array when you update the dependent values.

Wait A Tick

this.availableOptions = filteredOptions;
setTimeout(() => { 
  this.availableOptions = this.template.querySelector('lightning-dual-listbox').value
})

After changing the options, the value attribute should update, which we can then copy.

Filter On Update

this.availableOptions = filteredOptions;
this.selectedOptions = this.selectedOptions.filter(
  selectedValue => filteredOptions.find(
    availableOption => availableOption.value === selectedValue
  )
)

Basically, for each previously selected option, we see if we can find that value in the new list of options, and if not, remove it from the list.