From eb7c3827cc20ce54fef9a1fe0e2102a19c7da27e Mon Sep 17 00:00:00 2001
From: saurabhdaware <saurabh.daware@razorpay.com>
Date: Mon, 5 Feb 2024 09:59:27 +0530
Subject: [PATCH] fix: handle double clicks with stopPropogation

---
 .../src/components/Input/BaseInput/BaseInput.tsx     |  3 +--
 .../Input/BaseInput/StyledBaseInput.web.tsx          | 12 ++++++++++++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/blade/src/components/Input/BaseInput/BaseInput.tsx b/packages/blade/src/components/Input/BaseInput/BaseInput.tsx
index 0339121c0e5..0a0dc2ac7d7 100644
--- a/packages/blade/src/components/Input/BaseInput/BaseInput.tsx
+++ b/packages/blade/src/components/Input/BaseInput/BaseInput.tsx
@@ -908,8 +908,7 @@ const _BaseInput: React.ForwardRefRenderFunction<BladeElementRef, BaseInputProps
               handleOnSubmit={handleOnSubmit}
               handleOnInput={handleOnInput}
               handleOnKeyDown={handleOnKeyDown}
-              // In DropdownTrigger, click is handled on BaseInputTagSlot to cover padding around the real input
-              handleOnClick={isDropdownTrigger ? undefined : handleOnClick}
+              handleOnClick={handleOnClick}
               leadingIcon={leadingIcon}
               prefix={prefix}
               interactionElement={interactionElement}
diff --git a/packages/blade/src/components/Input/BaseInput/StyledBaseInput.web.tsx b/packages/blade/src/components/Input/BaseInput/StyledBaseInput.web.tsx
index cabe7e9913f..eb83055fd6e 100644
--- a/packages/blade/src/components/Input/BaseInput/StyledBaseInput.web.tsx
+++ b/packages/blade/src/components/Input/BaseInput/StyledBaseInput.web.tsx
@@ -135,6 +135,12 @@ const _StyledBaseInput: React.ForwardRefRenderFunction<
       name={name}
       type="button"
       onClick={(event: React.MouseEvent<HTMLInputElement>): void => {
+        if (props.isDropdownTrigger) {
+          // dropdown triggers have click event on outer container as well on web to handle outer padding clicks of input
+          // we don't want the clicks to be called twice in such cases so we stop propogation if this click has happened
+          event.stopPropagation();
+        }
+
         handleOnClick?.({ name, value: event });
       }}
       {...commonProps}
@@ -169,6 +175,12 @@ const _StyledBaseInput: React.ForwardRefRenderFunction<
         handleOnInput?.({ name, value: event });
       }}
       onClick={(event) => {
+        if (props.isDropdownTrigger) {
+          // dropdown triggers have click event on outer container as well on web to handle outer padding clicks of input
+          // we don't want the clicks to be called twice in such cases so we stop propogation if this click has happened
+          event.stopPropagation();
+        }
+
         handleOnClick?.({ name, value: event });
       }}
       autoCapitalize={autoCapitalize}