fix: Property pane dropdown for currency and phone input widgets. (#16379)

* fix: Property pane dropdown for currency and phone input widgets.

* fix: added focus on open, added test cases

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/CurrencyInput/CurrencyInput_spec.js

@@ -280,4 +280,16 @@ describe("Currency widget - ", () => {
       cy.get(themelocators.popover).should("not.exist");
     });
   });
+
+  it("Currency change dropdown should not close unexpectedly", function() {
+    cy.openPropertyPane(widgetName);
+
+    // Select the Currency dropdown option from property pane
+    // and enter a value that has space and returns 0 results
+    cy.get(".t--property-control-currency").click();
+    cy.get(".t--search-input input").type("gdp gdp");
+
+    // assert that the dropdown is still option
+    cy.get(".t--search-input input").should("be.visible");
+  });
 });

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/PhoneInput/Phone_input_spec.js

@@ -128,4 +128,16 @@ describe("Phone input widget - ", () => {
     // Check if isDirty is set to false
     cy.get(".t--widget-textwidget").should("contain", "false");
   });
+
+  it("Currency change dropdown should not close unexpectedly", function() {
+    cy.openPropertyPane(widgetName);
+
+    // Select the Currency dropdown option from property pane
+    // and enter a value that has space and returns 0 results
+    cy.get(".t--property-control-defaultcountrycode").click();
+    cy.get(".t--search-input input").type("AFDB (+93)");
+
+    // assert that the dropdown is still option
+    cy.get(".t--search-input input").should("be.visible");
+  });
 });

app/client/package.json

@@ -45,7 +45,7 @@
     "cypress-log-to-output": "^1.1.2",
     "dayjs": "^1.10.6",
     "deep-diff": "^1.0.2",
-    "design-system": "npm:@appsmithorg/design-system@1.0.15",
+    "design-system": "npm:@appsmithorg/design-system@1.0.18",
     "downloadjs": "^1.4.7",
     "draft-js": "^0.11.7",
     "emoji-mart": "^3.0.1",

app/client/src/components/propertyControls/DropDownControl.tsx

@@ -83,6 +83,7 @@ class DropDownControl extends BaseControl<DropDownControlProps> {
     return (
       <StyledDropDownContainer ref={this.containerRef}>
         <StyledDropDown
+          closeOnSpace={false}
           dropdownHeight={this.props.dropdownHeight}
           dropdownMaxHeight="200px"
           enableSearch={this.props.enableSearch}
@@ -96,8 +97,10 @@ class DropDownControl extends BaseControl<DropDownControlProps> {
           options={options}
           placeholder={this.props.placeholderText}
           removeSelectedOption={this.onItemRemove}
+          searchAutoFocus
           searchPlaceholder={this.props.searchPlaceholderText}
           selected={defaultSelected}
+          showEmptyOptions
           showLabelOnly
           width="100%"
         />

app/client/yarn.lock

@@ -6153,10 +6153,10 @@ depd@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz"
 
-"design-system@npm:@appsmithorg/design-system@1.0.15":
+"design-system@npm:@appsmithorg/design-system@1.0.18":
-  version "1.0.15"
+  version "1.0.18"
-  resolved "https://registry.yarnpkg.com/@appsmithorg/design-system/-/design-system-1.0.15.tgz#40b855d82d349f25c399e62e7b82a1ddadaa6975"
+  resolved "https://registry.yarnpkg.com/@appsmithorg/design-system/-/design-system-1.0.18.tgz#0f75d0bceb7bb0e4f2b561bae78a1fdb91cf7933"
-  integrity sha512-H43r0UriBVXfbWZg3vhBokDNW5kJKG+NoLae0BPNN6+72aYxfDBl+DocCI2KO6BYTdRnXZf9JQHi25t9t2yj/w==
+  integrity sha512-Zj8WNcKoYFFoY9jntr3Hmi82T++zCK3M7+jf0bdNJN0jiUu8GHOUz1jvAegPwmj4OUjp19RcrQXoNHQEtZRcXQ==
   dependencies:
     "@blueprintjs/datetime" "3.23.6"
     copy-to-clipboard "^3.3.1"