fix: dropdown notopening if user clicks on dropdown backdrop

razorpay · Nov 15, 2024 · 154be26 · 154be26
1 parent c06660f
commit 154be26
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/packages/blade/src/components/Input/BaseInput/BaseInput.tsx b/packages/blade/src/components/Input/BaseInput/BaseInput.tsx
@@ -326,7 +326,10 @@ type BaseInputCommonProps = FormInputLabelProps &
      * @default true
      **/
     isTableInputCell?: boolean;
-
+    /**
+     * Callback to be invoked when the backdrop is clicked
+     */
+    onBackdropClick?: () => void;
     /**
      * Hides the form hints and shows them as tooltip of trailing
      */
@@ -825,6 +828,7 @@ const _BaseInput: React.ForwardRefRenderFunction<BladeElementRef, BaseInputProps
     valueComponentType = 'text',
     isTableInputCell = false,
     showHintsAsTooltip = false,
+    onBackdropClick,
     ...styledProps
   },
   ref,
@@ -971,6 +975,7 @@ const _BaseInput: React.ForwardRefRenderFunction<BladeElementRef, BaseInputProps
               if (!isReactNative) {
                 inputRef.current?.focus();
               }
+              onBackdropClick?.();
             }}
             isTableInputCell={isTableInputCell}
           >

diff --git a/packages/blade/src/components/Input/DropdownInputTriggers/BaseDropdownInputTrigger.tsx b/packages/blade/src/components/Input/DropdownInputTriggers/BaseDropdownInputTrigger.tsx
@@ -316,6 +316,7 @@ const _BaseDropdownInputTrigger = (
       onChange={props.isSelectInput ? undefined : props.onInputValueChange}
       onKeyDown={props.onTriggerKeydown}
       size={props.size}
+      onBackdropClick={onTriggerClick}
       trailingInteractionElement={
         isAutoCompleteInHeader || (isInsideTableEditableCell && !isValidationStateNone) ? null : (
           <InputChevronIcon