From d5080b6884aa1db47edef12066a9024d1e204064 Mon Sep 17 00:00:00 2001
From: Ali <83188384+testA113@users.noreply.github.com>
Date: Tue, 23 Jan 2024 14:16:34 +1300
Subject: [PATCH] fix(r2a): fix layout shifting from errors showing as
 undefined [EE-6570] (#11000)

---
 app/react-tools/react2angular.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/react-tools/react2angular.tsx b/app/react-tools/react2angular.tsx
index f00ebb593..59e11d733 100644
--- a/app/react-tools/react2angular.tsx
+++ b/app/react-tools/react2angular.tsx
@@ -38,7 +38,16 @@ export function react2angular<T, U extends PropNames<T>[]>(
   Component: React.ComponentType<T & JSX.IntrinsicAttributes>,
   propNames: U & ([PropNames<T>] extends [U[number]] ? unknown : PropNames<T>)
 ): IComponentOptions & { name: string } {
-  const bindings = Object.fromEntries(propNames.map((key) => [key, '<']));
+  const bindings = Object.fromEntries(
+    propNames.map((key) => {
+      // use two way binding for errors, to avoid shifting the layout from errors going between undefined <-> some value when using inputs.
+      // See https://portainer.atlassian.net/browse/EE-6570 for more context
+      if (key === 'errors') {
+        return [key, '='];
+      }
+      return [key, '<'];
+    })
+  );
 
   return {
     bindings,