fix(blade): phone number input dropdown not opening (#2135)

* fix(blade): phone number input dropdown not opening * Create heavy-doors-impress.md
razorpay · Apr 22, 2024 · 2f0d96f · 2f0d96f
1 parent 0aa2495
commit 2f0d96f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/.changeset/heavy-doors-impress.md b/.changeset/heavy-doors-impress.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+fix(blade): phone number input dropdown not opening
diff --git a/packages/blade/src/components/Input/PhoneNumberInput/CountrySelector.web.tsx b/packages/blade/src/components/Input/PhoneNumberInput/CountrySelector.web.tsx
@@ -92,6 +92,13 @@ const CountrySelector = ({
           accessibilityLabel={`${countryNameFormatter.of(selectedCountry)} - Select Country`}
           icon={isDropdownOpen ? ChevronUpIcon : ChevronDownIcon}
           iconPosition="right"
+          // We need to prevent the click event from propagating to the BaseInputWrapper,
+          // Because the BaseInputWrapper is listening for click events to focus the input.
+          // We don't want that to happen when the user clicks on the dropdown button
+          // otherwise the dropdown will close immediately after opening
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
         >
           {/* @ts-expect-error */}
           <img