1

I have the below code for creating a list of checkbox's to select multiple options to filter a datatable. The code works fine within the sandbox however once i moved the code to the production org the code started to fail.

event.currentTarget.value is undefined in the production org but is fine when tested within sandbox

Any ideas what i'm missing here?

API version is 50 in both.

<lightning-button-menu label="Filter" alternative-text="Show menu" style="padding-top: 20px;" variant="border-filled" icon-name="utility:filterList" >
    <ul style="width: 150px;">
        <template for:each={List} for:item="item" >
                <li key={item.value}>
                    <lightning-input key={item.value} type="checkbox" label={item.label} value={item.value} onchange={filterList} data-id="checkbox">
                    </lightning-input>
                </li>
            </template>
        </ul>
    </lightning-button-menu>

  filterList(event) {
    console.log(event.currentTarget.value);
    let v = event.currentTarget.value;


    console.log(v);
    if (event.currentTarget.checked ) {
        this.ListToFilter.push(v);
    } else {
        // Value is unchecked, remove from list and rebuild the filter
        const index = this.ListToFilter.indexOf(v);
        if (index > -1) {
            this.ListToFilter.splice(index, 1);
        }
    }
    console.log(this.ToFilter);
    this.applyFilters();
}

Update I have changed the code so the value is held within the dataset and added a unique key to each item however the event is still empty,

I have also changed the JS logic to find each checkbox and check if they are checked and retreive the values from the dataset however this also fails

<lightning-button-menu label="Division Filter" alternative-text="Show menu" style="padding-top: 20px;" variant="border-filled" icon-name="utility:filterList" >
   <template for:each={List} for:item="item" >
         <lightning-input style="width: 150px;" key={item.id} type="checkbox" label={item.label} value={item.value} onchange={filterList} data-id="checkbox" data-value={item.value}>
          </lightning-input>
  </template>
filterList(event) {
        console.log(event.target.dataset.value);

        this.ListToFilter = [...this.template.querySelectorAll('lightning-input')]
            .filter(element => element.checked)
            .map(element => element.dataset.value);

       
        console.log(this.ListToFilter);
        this.applyFilters();
    }

The main problem looks to be that the event target looks to be empty / undefinded even though the onchange event is firing. This code works in a sandbox but once moved to production fails with empties

2
  • Just to clarify, The issue is that event.target.value (And event.currentTarget.value) are been returned as undefinded within the production system but are fine within sandbox Sep 2, 2021 at 9:09
  • Lightning-Input was changed to be just input and still having the issues. The dynamic binding is working as i can see this in the console, However the DOM seems to not return anything & the event also doesn't contain anything. Again this is ONLY happening in production. Time to call SF? Sep 3, 2021 at 8:29

2 Answers 2

1

Changed Approach to fix this.

Instead of using a lighting-input within the lightning-button-menu and having the input check for the onchange moving the logic around and using lightning-menu-item and using the checked proporty within the object passed from JS to HTML seems to have fixed this issue.

<lightning-button-menu label="Filter" alternative-text="Show menu" style="padding-top: 20px;" variant="border-filled" icon-name="utility:filterList" onselect={multiSelectMenu}>
      <template for:each={List} for:item="filter" >
          <lightning-menu-item key={filter.id} label={filter.label} value={filter.value} checked={filter.checked}>
          </lightning-menu-item>
      </template>
</lightning-button-menu>

Taking this approach and not using a input with a type of checkbox and instead using a lightning menu item seems to get the event to pass the correct values for filtering.

0

Not sure why currentTarget shouldn't work, but since the handler is on the element to check, you should just use target. You can also heavily optimize your code to just:

  filterList(event) {
    this.List.find((item) => item.value === event.target.value).checked = event.target.checked;
    this.ListToFilter = this.List.filter(item => item.checked);
    this.applyFilters();
  }

Assuming that List is mutable.

1
  • thanks for the quick response. I moved from target to currentTarget after finding this issue. I have tried event.target, event.target and event.getSource().get("v.value") all failed in production Sep 1, 2021 at 20:21

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .