onDestroy() doesn't work for kibana canvas

Elastic Stack Kibana
1

Hello. I've created simple plugin for canvas. Kibana version 7.3.
Something like this:

const browserFunctions = [
() => ({
name: 'myPlugin',
fn(data, args) {
return {
type: 'render',
as: 'myPlugin',
value: {data}
}
}
}),
];

const elements = [
() => ({
name: 'myPlugin',
displayName: 'My plugin',
image: '',
expression: 'filters | myPlugin | render',
}),
];

const renderers = () => ({
name: 'myComponent',
reuseDomNode: true,
render(domNode, data, handlers) {

ReactDOM.render(<MyComponent />, domNode, () => handlers.done());

handlers.onDestroy(() => ReactDOM.unmountComponentAtNode(domNode));

}
});;

kbnInterpreter.register({
elements,
browserFunctions,
renderers,
});

In MyComponent i added method componentWillUnmount(). When i refreshed page with canvas or went to another page unmounting didn't run. Have i made mistake here
handlers.onDestroy(() => ReactDOM.unmountComponentAtNode(domNode)); ?

2

Hi @Nordask1,

your code looks correct. The onDestroy hook is only called when the element is removed from the screen while staying within the Canvas application (e.g. removing it in edit mode or switching canvas sheets).

When navigating away from the page or reloading the browser tears down and recreates the complete Kibana client which does not trigger the onDestroy hook.

I'm not 100% sure whether this is intended or not, do you have more insights here @Catherine_Liu @clintandrewhall ?

To make it work now you can reside using the onunload event handler on the window object: https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onunload

3

Thx for answer. I didn't know about recreating kibana client.