From c78f4deaf7f386dc7faebf571b0378e1ff575ab2 Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Tue, 17 Jan 2023 22:38:00 +0530
Subject: [PATCH] fix: use suffix in text field (#6532)

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
---
 .../components/TimeTimeUnitInput.tsx          | 70 ++++++++-----------
 1 file changed, 29 insertions(+), 41 deletions(-)

diff --git a/packages/features/ee/workflows/components/TimeTimeUnitInput.tsx b/packages/features/ee/workflows/components/TimeTimeUnitInput.tsx
index 987ad6a6b1..bf989f401b 100644
--- a/packages/features/ee/workflows/components/TimeTimeUnitInput.tsx
+++ b/packages/features/ee/workflows/components/TimeTimeUnitInput.tsx
@@ -36,49 +36,37 @@ export const TimeTimeUnitInput = (props: Props) => {
           defaultValue={form.getValues("time") || 24}
           className="-mt-2 rounded-r-none text-sm focus:ring-0"
           {...form.register("time", { valueAsNumber: true })}
+          addOnSuffix={
+            <Dropdown>
+              <DropdownMenuTrigger asChild>
+                <button className="flex">
+                  <div className="mr-1 w-3/4">
+                    {timeUnit ? t(`${timeUnit.toLowerCase()}_timeUnit`) : "undefined"}{" "}
+                  </div>
+                  <div className="w-1/4 pt-1">
+                    <Icon.FiChevronDown />
+                  </div>
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                {timeUnitOptions.map((option, index) => (
+                  <DropdownMenuItem key={index} className="outline-none">
+                    <DropdownItem
+                      key={index}
+                      type="button"
+                      onClick={() => {
+                        setTimeUnit(option.value);
+                        form.setValue("timeUnit", option.value);
+                      }}>
+                      {option.label}
+                    </DropdownItem>
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </Dropdown>
+          }
         />
       </div>
-      <div>
-        <Dropdown>
-          <DropdownMenuTrigger asChild>
-            <button className="-ml-1 h-9 w-24 rounded-none rounded-r-md border border-gray-300 bg-gray-50 px-3 py-1 text-sm">
-              <div className="flex">
-                <div className="mr-1 w-3/4">
-                  {timeUnit ? t(`${timeUnit.toLowerCase()}_timeUnit`) : "undefined"}{" "}
-                </div>
-                <div className="w-1/4 pt-1">
-                  <Icon.FiChevronDown />
-                </div>
-              </div>
-            </button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent>
-            {timeUnitOptions.map((option, index) => (
-              <DropdownMenuItem key={index} className="outline-none">
-                {/* <button
-                  key={index}
-                  type="button"
-                  className="h-8 w-20 justify-start pl-3 text-left text-sm"
-                  onClick={() => {
-                    setTimeUnit(option.value);
-                    form.setValue("timeUnit", option.value);
-                  }}>
-                  {option.label}
-                </button> */}
-                <DropdownItem
-                  key={index}
-                  type="button"
-                  onClick={() => {
-                    setTimeUnit(option.value);
-                    form.setValue("timeUnit", option.value);
-                  }}>
-                  {option.label}
-                </DropdownItem>
-              </DropdownMenuItem>
-            ))}
-          </DropdownMenuContent>
-        </Dropdown>
-      </div>
     </div>
   );
 };