Update renderer handlers when element is changed

x-pack/plugins/canvas/public/components/element_content/element_content.js

@@ -12,7 +12,6 @@ import { getType } from '@kbn/interpreter/common';
 import { Loading } from '../loading';
 import { RenderWithFn } from '../render_with_fn';
 import { ElementShareContainer } from '../element_share_container';
-import { assignHandlers } from '../../lib/create_handlers';
 import { InvalidExpression } from './invalid_expression';
 import { InvalidElementType } from './invalid_element_type';
 
@@ -48,15 +47,7 @@ export const ElementContent = compose(
   pure,
   ...branches
 )(({ renderable, renderFunction, width, height, handlers }) => {
-  const {
-    getFilter,
-    setFilter,
-    done,
-    onComplete,
-    onEmbeddableInputChange,
-    onEmbeddableDestroyed,
-    getElementId,
-  } = handlers;
+  const { onComplete } = handlers;
 
   return Style.it(
     renderable.css,
@@ -79,14 +70,7 @@ export const ElementContent = compose(
           css={renderable.css} // This is an actual CSS stylesheet string, it will be scoped by RenderElement
           width={width}
           height={height}
-          handlers={assignHandlers({
-            getFilter,
-            setFilter,
-            done,
-            onEmbeddableInputChange,
-            onEmbeddableDestroyed,
-            getElementId,
-          })}
+          handlers={handlers}
         />
       </ElementShareContainer>
     </div>

x-pack/plugins/canvas/public/components/render_with_fn/render_with_fn.tsx

@@ -6,6 +6,8 @@
 
 import React, { useState, useEffect, useRef, FC, useCallback } from 'react';
 
+import { isEqual } from 'lodash';
+
 import { useNotifyService } from '../../services';
 import { RenderToDom } from '../render_to_dom';
 import { ErrorStrings } from '../../../i18n';
@@ -81,6 +83,12 @@ export const RenderWithFn: FC<Props> = ({
     []
   );
 
+  useEffect(() => {
+    if (!isEqual(handlers.current, incomingHandlers)) {
+      handlers.current = incomingHandlers;
+    }
+  }, [incomingHandlers]);
+
   const render = useCallback(() => {
     renderFn(renderTarget.current!, config, handlers.current);
   }, [renderTarget, config, renderFn]);