I have an developed with the new Lightning Web Component framework. The issue comes when I wrap it in an Aura app it order to expose it direclty at a single URL. Everything works except that when I click on a specific part of the app I get this cryptic error :
Cannot read property 'apply' of undefined
The specific control that throws the error when clicked is the SLDS dropdown in the following LWC component :
Template :
<template>
<div if:false={mobile} class="slds-grid" onclick={blockOnClick}>
<div class="slds-col slds-size_12-of-12 slds-large-size_4-of-12 slds-grid">
<div class="slds-dropdown-trigger slds-dropdown-trigger_click filter-list slds-col slds-size_4-of-12">
<button onclick={toggleFilter}
class="toggle-filter slds-button slds-button_icon slds-button_icon-border-filled"
aria-haspopup="true" title="Show More">
{currentFilter}
<lightning-icon icon-name="utility:down" size="x-small"></lightning-icon>
</button>
<div class="slds-dropdown slds-dropdown_left">
<ul class="slds-dropdown__list" role="menu" aria-label="Show More">
<template for:each={activityTypes} for:item="type">
<c-select-activity-filter-item activity-type={type} key={type}
onselect={filterList}></c-select-activity-filter-item>
</template>
</ul>
</div>
</div>
<div class="main-input-wrapper slds-form-element__control slds-input-has-icon slds-input-has-icon_left slds-col slds-size_8-of-12">
<lightning-icon class="slds-icon slds-input__icon slds-input__icon_left slds-icon-text-default"
icon-name="utility:search" size="x-small"></lightning-icon>
<input
type="text"
class="slds-input main-input"
onclick={toggleList}
oninput={handleInput}
placeholder={placeholder}
/>
</div>
<div
class="slds-dropdown-trigger activity-list slds-dropdown-trigger_click"
>
<div class="slds-dropdown activity-list activity-list-responsive slds-dropdown_small">
<ul class="slds-dropdown__list" role="menu" aria-label="Show More">
<template for:each={activities.list} for:item="activity">
<li key={activity.activityId} onclick={select} class="slds-dropdown__item slds-is-selected"
role="presentation">
<a aria-checked="true" href="javascript:void(0);" role="menuitemcheckbox" tabindex="0">
<span class="slds-truncate" title={activity.fullName}>
<div class="slds-checkbox" onclick={checkActivity}>
<template if:true={activity.defaultActivity}>
<input type="checkbox" name={activity.activityId} id={activity.activityId}
disabled/>
</template>
<template if:false={activity.defaultActivity}>
<input type="checkbox" name={activity.activityId} id={activity.activityId}/>
</template>
<label class="slds-checkbox__label" for={activity.activityId}>
<span class="slds-checkbox_faux"></span>
<template if:true={activity.defaultActivity}>
<span class="slds-form-element__label" style="color: #cccccc"> {activity.fullName}</span>
</template>
<template if:false={activity.defaultActivity}>
<span class="slds-form-element__label"> {activity.fullName}</span>
</template>
</label>
</div>
</span>
</a>
</li>
</template>
</ul>
</div>
</div>
</div>
<div class="slds-col slds-size_12-of-12 slds-large-size_2-of-12">
<template if:true={addBtn}>
<template if:false={mobile}>
<button class="slds-button add-button" onclick={handleAdd}>
<lightning-icon icon-name="utility:add" variant="inverse" size="x-small"></lightning-icon>
</button>
</template>
</template>
</div>
<div class="slds-col slds-size_0-of-12 slds-large-size_6-of-12"></div>
</div>
<!-- ============================================= Mobile ============================================= -->
<div if:true={mobile}>
<button class="slds-button green-button modalButton" onclick={showModal}>{addActivities}</button>
<div if:true={modalShown}>
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<header class="slds-modal__header">
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">{addActivities}</h2>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<div class="slds-dropdown-trigger slds-dropdown-trigger_click filter-list slds-col slds-size_4-of-12">
<button onclick={toggleFilter}
class="toggle-filter slds-button slds-button_icon slds-button_icon-border-filled"
aria-haspopup="true" title="Show More">
{currentFilter}
<lightning-icon icon-name="utility:down" size="x-small"></lightning-icon>
</button>
<div class="slds-dropdown slds-dropdown_left">
<ul class="slds-dropdown__list" role="menu" aria-label="Show More">
<template for:each={activityTypes} for:item="type">
<c-select-activity-filter-item activity-type={type} key={type}
onselect={filterList}></c-select-activity-filter-item>
</template>
</ul>
</div>
</div>
<div class="main-input-wrapper slds-form-element__control slds-input-has-icon slds-input-has-icon_left slds-col slds-size_8-of-12">
<lightning-icon
class="slds-icon slds-input__icon slds-input__icon_left slds-icon-text-default"
icon-name="utility:search" size="x-small"></lightning-icon>
<input
type="text"
class="slds-input main-input"
oninput={handleInput}
placeholder={placeholder}
onfocusin={minimize}
onfocusout={maximize}
/>
</div>
<lightning-button-icon if:true={emptyButtonShown} onclick={handleEmptyButton} class="slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default" variant="bare" icon-name="utility:close" alternative-text="remove" ></lightning-button-icon>
<br><br>
<div class="activity-list">
<template for:each={activities.list} for:item="activity">
<div key={activity.activityId} class="slds-checkbox" onclick={checkActivity}>
<template if:true={activity.defaultActivity}>
<input type="checkbox" name={activity.activityId} id={activity.activityId}
disabled/>
</template>
<template if:false={activity.defaultActivity}>
<input type="checkbox" name={activity.activityId} id={activity.activityId}/>
</template>
<label class="slds-checkbox__label" for={activity.activityId}>
<span class="slds-checkbox_faux"></span>
<template if:true={activity.defaultActivity}>
<span class="slds-form-element__label" style="color: #cccccc"> {activity.fullName}</span>
</template>
<template if:false={activity.defaultActivity}>
<span class="slds-form-element__label"> {activity.fullName}</span>
</template>
</label>
</div>
</template>
</div>
</div>
<footer class="slds-modal__footer slds-grid">
<button class="slds-button slds-col slds-size_1-of-2 slds-button--neutral" onclick={hideModal}>Cancel</button>
<button class="slds-button slds-col slds-size_1-of-2 green-button" onclick={handleAdd}>{addActivities}</button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</div>
</div>
</template>
Controller :
/* eslint-disable no-console */
import { LightningElement, track, api } from 'lwc';
import getUserBAUsableObject from '@salesforce/apex/TOCK_Main_CTRL_CLS.getUserBAUsableObject'
import TOCK_ActivityFilterLabel from '@salesforce/label/c.TOCK_ActivityFilterLabel';
import TOCK_ActivityFilterProjects from '@salesforce/label/c.TOCK_ActivityFilterProjects';
import TOCK_ActivityFilterTraining from '@salesforce/label/c.TOCK_ActivityFilterTraining';
import TOCK_ActivityFilterAll from '@salesforce/label/c.TOCK_ActivityFilterAll';
import TOCK_AddActivities from '@salesforce/label/c.TOCK_AddActivities'
import addTockUserCurrBA from '@salesforce/apex/TOCK_Main_CTRL_CLS.addTockUserCurrBA'
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
// import loadScript from 'lightning/platformResourceLoader';
// import FuseJS from '@salesforce/resourceUrl/FuseJS';
import TOCK_SelectActivityPlaceholder from '@salesforce/label/c.TOCK_SelectActivityPlaceholder';
import TOCK_SearchActivity from '@salesforce/label/c.TOCK_SearchActivity';
export default class SelectActivity extends LightningElement {
// Labels
filter = TOCK_ActivityFilterLabel;
projects = TOCK_ActivityFilterProjects;
training = TOCK_ActivityFilterTraining;
all = TOCK_ActivityFilterAll;
placeholder = TOCK_SelectActivityPlaceholder;
search = TOCK_SearchActivity;
addActivities = TOCK_AddActivities;
@api
mobile;
@track
activities = { // Activities displayed in the list (possibly filtered)
list : []
}
allActivities= { // All of the user's activities (unfiltered)
list : []
}
connectedCallback(){
this.loadActivities();
}
// ======================================== BA List =================================================
@api
loadActivities(){
getUserBAUsableObject()
.then( result => {
let listBA = JSON.parse(result)
this.activities.list = listBA;
this.allActivities.list = listBA;
this.searchList = this.activities.list;
})
.catch( error =>{
this.dispatchEvent(new ShowToastEvent({
title: "Load activities error",
message: "Something went wrong, please report this error",
variant: "error",
}));
console.error(error);
});
}
toggleList(){
const list = this.template.querySelector(".activity-list");
const input = this.template.querySelector(".main-input");
if(list.classList.contains("slds-is-open")){
list.classList.remove("slds-is-open");
input.placeholder = this.placeholder;
}
else{
list.classList.add("slds-is-open");
input.placeholder = this.search;
}
}
blockOnClick(event){
event.stopPropagation();
}
@api
closeListAndFilter(){
const input = this.template.querySelector(".main-input");
const list = this.template.querySelector(".filter-list");
const filter = this.template.querySelector(".activity-list");
if(!this.mobile){
if(list){
list.classList.remove("slds-is-open");
}
if(filter){
filter.classList.remove("slds-is-open");
}
if(input){
input.placeholder = this.placeholder;
}
}
}
// ================================== Adding business activities ====================================
@track
addBtn = false;
checkActivity(){
const checkboxes = this.template.querySelectorAll(".activity-list input");
for(const checkboxe of checkboxes){
if(checkboxe.checked){
this.addBtn = true;
return;
}
}
this.addBtn = false;
}
handleAdd(){
const list = this.template.querySelector(".activity-list");
if(list.classList.contains("slds-is-open")){
list.classList.remove("slds-is-open");
}
const checkboxes = this.template.querySelectorAll(".activity-list input");
let dto = [];
for(const checkboxe of checkboxes){
if(checkboxe.checked){
dto.push({activityId: checkboxe.name});
}
}
addTockUserCurrBA({ params: JSON.stringify(dto)})
.then( ()=>{
this.dispatchEvent(new CustomEvent('baupdate'));
this.loadActivities();
if(this.mobile){
this.hideModal();
}
})
.catch( error =>{
this.dispatchEvent(new ShowToastEvent({
title: "Add default user BA error",
message: "Something went wrong, please report this error",
variant: "error",
}));
console.error(error);
});
}
// ======================================= Autocomplete =======================================
handleInput(event){
let newList = [];
let keyword = event.target.value;
this.emptyButtonShown = keyword !== "";
this.activities.list = this.searchList;
for(let activity of this.activities.list){
if(activity.fullName.toLowerCase().includes(keyword.toLowerCase())){
newList.push(activity);
}
}
this.activities.list = newList;
}
// ======================================= Filter ================================================
@track
currentFilter = TOCK_ActivityFilterAll;
toggleFilter(){
const list = this.template.querySelector(".filter-list");
list.classList.toggle("slds-is-open");
console.log(list.className);
}
get activityTypes(){
return ["All","Management","Training","Projects","Services","Development","Buy&Resale"]
}
filterList(event){
this.template.querySelectorAll("c-select-activity-filter-item").forEach( e => {
if(e.getActivityType() !== event.detail){
e.unselect();
}
else{
e.select();
}
});
this.currentFilter = event.detail;
let newList = [];
for(let activity of this.allActivities.list){
if(activity.type === event.detail || event.detail === "All"){
newList.push(activity);
}
}
this.activities.list = newList;
this.searchList = newList;
this.closeListAndFilter();
}
// ============================================= Mobile =======================================================
@track
modalShown = false;
@track
emptyButtonShown = false;
showModal(){
this.modalShown = true;
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
hideModal(){
this.modalShown = false;
}
handleEmptyButton(){
this.template.querySelector(".main-input").value = "";
this.emptyButtonShown = false;
this.activities.list = this.searchList;
}
minimize(){
this.template.querySelector(".slds-modal__content").style.height = "20rem";
}
maximize(){
this.template.querySelector(".slds-modal__content").style.height = "40.5rem";
}
}
Aura App Wrapper :
<aura:application extends="force:slds">
<!-- <c:NewTockAuraWrapperComponent></c:NewTockAuraWrapperComponent> -->
<c:tockMain></c:tockMain>
</aura:application>
This error doesn't occur when the app is used through its tab in Salesforce. So if you know a way to expose a Lightning Web Component App without using an Aura App, or how to find the source of this error, I'd be gratefull.
Thanks in advance,
