From 4c9484935b3fc86e6fe883406d130deb179a5419 Mon Sep 17 00:00:00 2001 From: Arsalan Yaldram Date: Tue, 30 Aug 2022 11:33:31 +0530 Subject: [PATCH] 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 --- .../Widgets/CurrencyInput/CurrencyInput_spec.js | 12 ++++++++++++ .../Widgets/PhoneInput/Phone_input_spec.js | 12 ++++++++++++ app/client/package.json | 2 +- .../components/propertyControls/DropDownControl.tsx | 3 +++ app/client/yarn.lock | 8 ++++---- 5 files changed, 32 insertions(+), 5 deletions(-) diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/CurrencyInput/CurrencyInput_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/CurrencyInput/CurrencyInput_spec.js index 25c638890f..0592c97631 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/CurrencyInput/CurrencyInput_spec.js +++ b/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"); + }); }); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/PhoneInput/Phone_input_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/PhoneInput/Phone_input_spec.js index 72a8613a07..ae8b589806 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/PhoneInput/Phone_input_spec.js +++ b/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"); + }); }); diff --git a/app/client/package.json b/app/client/package.json index 3ef42567f7..ef5214fa56 100644 --- a/app/client/package.json +++ b/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", diff --git a/app/client/src/components/propertyControls/DropDownControl.tsx b/app/client/src/components/propertyControls/DropDownControl.tsx index c63f16afad..9e1c1b49d3 100644 --- a/app/client/src/components/propertyControls/DropDownControl.tsx +++ b/app/client/src/components/propertyControls/DropDownControl.tsx @@ -83,6 +83,7 @@ class DropDownControl extends BaseControl { return ( { options={options} placeholder={this.props.placeholderText} removeSelectedOption={this.onItemRemove} + searchAutoFocus searchPlaceholder={this.props.searchPlaceholderText} selected={defaultSelected} + showEmptyOptions showLabelOnly width="100%" /> diff --git a/app/client/yarn.lock b/app/client/yarn.lock index 2959b56998..598c567a4e 100644 --- a/app/client/yarn.lock +++ b/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": - version "1.0.15" - resolved "https://registry.yarnpkg.com/@appsmithorg/design-system/-/design-system-1.0.15.tgz#40b855d82d349f25c399e62e7b82a1ddadaa6975" - integrity sha512-H43r0UriBVXfbWZg3vhBokDNW5kJKG+NoLae0BPNN6+72aYxfDBl+DocCI2KO6BYTdRnXZf9JQHi25t9t2yj/w== +"design-system@npm:@appsmithorg/design-system@1.0.18": + version "1.0.18" + resolved "https://registry.yarnpkg.com/@appsmithorg/design-system/-/design-system-1.0.18.tgz#0f75d0bceb7bb0e4f2b561bae78a1fdb91cf7933" + integrity sha512-Zj8WNcKoYFFoY9jntr3Hmi82T++zCK3M7+jf0bdNJN0jiUu8GHOUz1jvAegPwmj4OUjp19RcrQXoNHQEtZRcXQ== dependencies: "@blueprintjs/datetime" "3.23.6" copy-to-clipboard "^3.3.1"