Going by the documentation, it seems you will need to create an additional property and utilize that in your wired function.
To refresh a wired method, pass the argument the wired method receives (which is the wired value) to refreshApex()
. In this sample code, the wired method is wiredGetActivityHistory(value)
. Hold on to the value provisioned by the wire service and pass it to refreshApex()
.
You will need to declare another variable, say mySendForSplitting
and then utilize that in your sendForSplitting
, something as:
sendForSplitting({error,data}) {
this.mySendForSplitting = data;
// rest of the code
}
And then use refreshApex()
as below:
refreshApex(this.mySendForSplitting);
You can find an example on the lwc-recipe as well.
this
refers to the default class
and not window.
Container component (not owner) can add event listeners and access elements directly on this
and not template
. So, we should use this.addEventListener
and this.querySelector
Owner component has to add event-listeners and identification through template
. So, we should use this.template.addEventListener
and this.template.querySelector
Please find below the example:
Consider 3 components Grandparent, parent, and child as below:
Grandparent.html:
<template>
<div>Grandparent:</div>
<c-parent>
<span slot='myslot'>
<c-child></c-child>
</span>
</c-parent>
</template>
Here, grandparent is the owner of c-child
and parent component is
only the container of child
Grandparent.js:
export default class Grandparent extends LightningElement {
constructor() {
super();
console.log('this => ', this);
this.addEventListener('myevent', this.myeventHandler);
this.template.addEventListener('myevent', this.myeventHandlerTemplate);
}
renderedCallback() {
console.log("Grandparent renderedCallback => ", this.querySelector('c-child'));
console.log("Grandparent renderedCallback template => ", this.template.querySelector('c-child'));
}
myeventHandler(event) {
console.log('Grand parent - myevent handled');
}
myeventHandlerTemplate(event) {
console.log('Grand parent template - myevent handled');
}
}
parent.html:
<template>
<div>
<slot name='myslot'></slot>
</div>
</template>
parent.js:
export default class Parent extends LightningElement {
constructor() {
super();
console.log('this => ', this);
this.addEventListener('myevent', this.myeventHandler);
this.template.addEventListener('myevent', this.myeventHandlerTemplate);
}
renderedCallback() {
console.log("parent renderedCallback => ", this.querySelector('c-child'));
console.log("parent renderedCallback template => ", this.template.querySelector('c-child'));
}
myeventHandler(event) {
console.log('parent - myevent handled');
}
myeventHandlerTemplate(event) {
console.log('parent template - myevent handled');
}
}
We are adding event-listeners and query-selectors on both direct
this
and template
to check the functionality in both parent and
grandparent.
child.js:
export default class Child extends LightningElement {
connectedCallback() {
this.dispatchEvent(new CustomEvent('myevent', { bubbles: true }));
}
}
bubbles:true
and composed:false
(default is false) will make the
event bubble up until shadow boundary.
Below are the logs we get: (in order)
this => Grandparent {setAttribute: ƒ}
this => Parent {setAttribute: ƒ}
parent template - myevent handled
parent - myevent handled
Grand parent template - myevent handled
parent renderedCallback => c-child
parent renderedCallback template => null
Grandparent renderedCallback => null
Grandparent renderedCallback template => c-child
As you see, this
has returned class instance.
querySelector
for parent component worked only for direct this
and returned null
on template.
Also for event listener, container component - parent
listened on direct this
. However, there appears to be some bug/unknown issue since container component is able to listen to the event on template
.
Only template
binding worked in Grandparent.
Best Answer
keyboard up / down events normally should cross the shadow boundary. One important thing is that if you want to listen on div elements that they need a tabindex in order to be "selectable".
On this playground you can see the lwc-recipes modal component which has a direct key up listener. Click on button => shows modal (and get autofocused) => pressing Escape will hide it again
Edit based on Comment: As Alternative the Listener can also be set in the parent component as showcased on this playground