From 73bfe0aebe0c964144a735d09234b2474b4e099c Mon Sep 17 00:00:00 2001
From: Hariom Balhara <hariombalhara@gmail.com>
Date: Tue, 4 Apr 2023 13:25:56 +0530
Subject: [PATCH] HotFix: Broken Email Field in Routing Form (#8074)

* Add darkmode styles and make it full width and other classes that are for TextWidget

* Handle email text change
---
 .../react-awesome-query-builder/config/config.tsx  | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/app-store/routing-forms/components/react-awesome-query-builder/config/config.tsx b/packages/app-store/routing-forms/components/react-awesome-query-builder/config/config.tsx
index 3d9e9b154b..c8fcc9633f 100644
--- a/packages/app-store/routing-forms/components/react-awesome-query-builder/config/config.tsx
+++ b/packages/app-store/routing-forms/components/react-awesome-query-builder/config/config.tsx
@@ -1,3 +1,4 @@
+import type { ChangeEvent } from "react";
 import type { Settings, Widgets, SelectWidgetProps } from "react-awesome-query-builder";
 // Figure out why routing-forms/env.d.ts doesn't work
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -94,7 +95,18 @@ const widgets: Widgets & { [key in keyof Widgets]: Widgets[key] & { type: string
       if (!props) {
         return <div />;
       }
-      return <EmailField type="email" {...props} />;
+
+      return (
+        <EmailField
+          onChange={(e: ChangeEvent<HTMLInputElement>) => {
+            const val = e.target.value;
+            props.setValue(val);
+          }}
+          containerClassName="w-full"
+          className="dark:placeholder:text-darkgray-600 focus:border-brand dark:border-darkgray-300 dark:text-darkgray-900 block w-full rounded-md border-gray-300 text-sm focus:ring-black disabled:bg-gray-200 disabled:hover:cursor-not-allowed dark:bg-transparent dark:selection:bg-green-500 disabled:dark:text-gray-500"
+          {...props}
+        />
+      );
     },
   },
 };