From e4e7c59bc2053c4e5d0ccaf3941df2a13babaabb Mon Sep 17 00:00:00 2001
From: Vicky Bansal <67091118+vicky-primathon@users.noreply.github.com>
Date: Wed, 9 Feb 2022 12:32:57 +0530
Subject: [PATCH] fix: disable closing dropdown on space (#10945)

---
 app/client/src/components/ads/Dropdown.tsx                | 8 ++++++++
 .../component/CurrencyCodeDropdown.tsx                    | 1 +
 .../PhoneInputWidget/component/ISDCodeDropdown.tsx        | 1 +
 3 files changed, 10 insertions(+)

diff --git a/app/client/src/components/ads/Dropdown.tsx b/app/client/src/components/ads/Dropdown.tsx
index 33ec49e692..73e85978fe 100644
--- a/app/client/src/components/ads/Dropdown.tsx
+++ b/app/client/src/components/ads/Dropdown.tsx
@@ -76,6 +76,7 @@ export type DropdownProps = CommonComponentProps &
     dropdownHeight?: string;
     dropdownMaxHeight?: string;
     showDropIcon?: boolean;
+    closeOnSpace?: boolean;
     dropdownTriggerIcon?: React.ReactNode;
     containerClassName?: string;
     headerLabel?: string;
@@ -793,6 +794,7 @@ export default function Dropdown(props: DropdownProps) {
     helperText,
     removeSelectedOption,
     hasError,
+    closeOnSpace = true,
   } = { ...props };
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [selected, setSelected] = useState<DropdownOption | DropdownOption[]>(
@@ -872,6 +874,12 @@ export default function Dropdown(props: DropdownProps) {
           }
           break;
         case " ":
+          if (closeOnSpace) {
+            e.preventDefault();
+            if (isOpen && !("length" in selected)) optionClickHandler(selected);
+            else onClickHandler();
+          }
+          break;
         case "Enter":
           e.preventDefault();
           if (isOpen && !("length" in selected)) optionClickHandler(selected);
diff --git a/app/client/src/widgets/CurrencyInputWidget/component/CurrencyCodeDropdown.tsx b/app/client/src/widgets/CurrencyInputWidget/component/CurrencyCodeDropdown.tsx
index a7b369ff47..a13a855b43 100644
--- a/app/client/src/widgets/CurrencyInputWidget/component/CurrencyCodeDropdown.tsx
+++ b/app/client/src/widgets/CurrencyInputWidget/component/CurrencyCodeDropdown.tsx
@@ -156,6 +156,7 @@ export default function CurrencyTypeDropdown(props: CurrencyDropdownProps) {
   return (
     <DropdownContainer>
       <Dropdown
+        closeOnSpace={false}
         containerClassName="currency-type-filter"
         dropdownHeight="139px"
         dropdownTriggerIcon={dropdownTriggerIcon}
diff --git a/app/client/src/widgets/PhoneInputWidget/component/ISDCodeDropdown.tsx b/app/client/src/widgets/PhoneInputWidget/component/ISDCodeDropdown.tsx
index 41a628d44e..14c733848c 100644
--- a/app/client/src/widgets/PhoneInputWidget/component/ISDCodeDropdown.tsx
+++ b/app/client/src/widgets/PhoneInputWidget/component/ISDCodeDropdown.tsx
@@ -147,6 +147,7 @@ export default function ISDCodeDropdown(props: ISDCodeDropdownProps) {
   }
   return (
     <Dropdown
+      closeOnSpace={false}
       containerClassName="country-type-filter"
       dropdownHeight="139px"
       dropdownTriggerIcon={dropdownTrigger}