fix: handle double clicks with stopPropogation

razorpay · Feb 5, 2024 · eb7c382 · eb7c382
1 parent 66be949
commit eb7c382
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git 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
@@ -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}