From 9d5ce1c5a594e845067f486c72ae51ce1c91b592 Mon Sep 17 00:00:00 2001
From: Ryland Herrick <ryalnd@gmail.com>
Date: Fri, 4 Sep 2020 16:02:15 -0500
Subject: [PATCH] Render our field components with React.createElement

Without this, we get some bad behaviors:
* Cannot use React.memo'd components
* Cannot switch between UseField components (causes a "change in the
  order of hooks" error from React)
---
 .../static/forms/hook_form_lib/components/use_field.tsx   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/plugins/es_ui_shared/static/forms/hook_form_lib/components/use_field.tsx b/src/plugins/es_ui_shared/static/forms/hook_form_lib/components/use_field.tsx
index 3a3ab0dab5e93..6b913f246abbb 100644
--- a/src/plugins/es_ui_shared/static/forms/hook_form_lib/components/use_field.tsx
+++ b/src/plugins/es_ui_shared/static/forms/hook_form_lib/components/use_field.tsx
@@ -49,7 +49,7 @@ function UseFieldComp<T = unknown>(props: Props<T>) {
   } = props;
 
   const form = useFormContext();
-  const componentToRender = component ?? 'input';
+  const ComponentToRender = component ?? 'input';
   // For backward compatibility we merge the "componentProps" prop into the "rest"
   const propsToForward =
     componentProps !== undefined ? { ...componentProps, ...rest } : { ...rest };
@@ -91,9 +91,9 @@ function UseFieldComp<T = unknown>(props: Props<T>) {
     return children!(field);
   }
 
-  if (componentToRender === 'input') {
+  if (ComponentToRender === 'input') {
     return (
-      <input
+      <ComponentToRender
         type={field.type}
         onChange={field.onChange}
         value={(field.value as unknown) as string}
@@ -102,7 +102,7 @@ function UseFieldComp<T = unknown>(props: Props<T>) {
     );
   }
 
-  return componentToRender({ field, ...propsToForward });
+  return <ComponentToRender {...{ field, ...propsToForward }} />;
 }
 
 export const UseField = React.memo(UseFieldComp) as typeof UseFieldComp;