From 5b100966ec5081f5e489ef357a99f423ae827b31 Mon Sep 17 00:00:00 2001
From: Poff Poffenberger <poffdeluxe@gmail.com>
Date: Mon, 26 Oct 2020 18:04:01 -0500
Subject: [PATCH] Update renderer handlers when element is changed

---
 .../element_content/element_content.js        | 20 ++-----------------
 .../render_with_fn/render_with_fn.tsx         |  8 ++++++++
 2 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/x-pack/plugins/canvas/public/components/element_content/element_content.js b/x-pack/plugins/canvas/public/components/element_content/element_content.js
index e2c1a61c348d13..2c1d9621f6df4c 100644
--- a/x-pack/plugins/canvas/public/components/element_content/element_content.js
+++ b/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>
diff --git a/x-pack/plugins/canvas/public/components/render_with_fn/render_with_fn.tsx b/x-pack/plugins/canvas/public/components/render_with_fn/render_with_fn.tsx
index c5fe7074fea0bf..ce33ef38d6dc3f 100644
--- a/x-pack/plugins/canvas/public/components/render_with_fn/render_with_fn.tsx
+++ b/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]);