From a16372fed1537433d3f7da1ec5e109c793606fb3 Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Thu, 22 Oct 2020 01:15:02 +0530
Subject: [PATCH] Fix Dropdown widget selection (#1340)

---
 app/client/cypress.json                       |  2 +-
 .../FormWidgets/Dropdown_spec.js              | 26 ++++++++++++++-----
 app/client/cypress/locators/Widgets.json      |  1 +
 app/client/src/widgets/DropdownWidget.tsx     |  6 ++++-
 4 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/app/client/cypress.json b/app/client/cypress.json
index e6cabe496f..37f524063b 100644
--- a/app/client/cypress.json
+++ b/app/client/cypress.json
@@ -3,7 +3,7 @@
   "defaultCommandTimeout": 20000,
   "requestTimeout": 21000,
   "pageLoadTimeout": 20000,
-  "video": false,
+  "video": true,
   "reporter": "mochawesome",
   "reporterOptions": {
     "reportDir": "results",
diff --git a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/Dropdown_spec.js b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/Dropdown_spec.js
index 279bed8d5c..0e28f706c1 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/Dropdown_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/Dropdown_spec.js
@@ -1,20 +1,33 @@
 const commonlocators = require("../../../locators/commonlocators.json");
 const formWidgetsPage = require("../../../locators/FormWidgets.json");
+const widgetLocators = require("../../../locators/Widgets.json");
 const publish = require("../../../locators/publishWidgetspage.json");
 const dsl = require("../../../fixtures/newFormDsl.json");
 const pages = require("../../../locators/Pages.json");
+const data = require("../../../fixtures/example.json");
 
 describe("Dropdown Widget Functionality", function() {
   before(() => {
     cy.addDsl(dsl);
   });
-  it("Dropdown Widget Functionality", function() {
+  it("Selects value with invalid default value", () => {
     cy.openPropertyPane("dropdownwidget");
-    /**
-     * @param{Text} Random Text
-     * @param{DropdownWidget}Mouseover
-     * @param{DropdownPre Css} Assertion
-     */
+
+    cy.testJsontext("options", JSON.stringify(data.input));
+    cy.testJsontext("defaultoption", "Not an option");
+
+    cy.get(formWidgetsPage.dropdownWidget)
+      .find(widgetLocators.dropdownSingleSelect)
+      .click({ force: true });
+    cy.get(commonlocators.singleSelectMenuItem)
+      .contains("Option 3")
+      .click({ force: true });
+
+    cy.get(formWidgetsPage.dropdownWidget)
+      .find(widgetLocators.defaultSingleSelectValue)
+      .should("have.text", "Option 3");
+  });
+  it("Dropdown Widget Functionality", function() {
     cy.widgetText(
       "lock",
       formWidgetsPage.dropdownWidget,
@@ -30,7 +43,6 @@ describe("Dropdown Widget Functionality", function() {
     cy.get(formWidgetsPage.dropdownSelectionType)
       .find(commonlocators.menuSelection)
       .should("have.text", "Multi Select");
-    cy.testJsontext("options", JSON.stringify(this.data.input));
     /**
      * @param{Show Alert} Css for InputChange
      */
diff --git a/app/client/cypress/locators/Widgets.json b/app/client/cypress/locators/Widgets.json
index 2b49663e52..cc7e648811 100644
--- a/app/client/cypress/locators/Widgets.json
+++ b/app/client/cypress/locators/Widgets.json
@@ -41,6 +41,7 @@
     "videoWidget": ".t--draggable-videowidget",
     "autoPlay": ".t--property-control-autoplay > .bp3-control > .bp3-control-indicator",
     "defaultOption": ".t--property-control-defaultoption .CodeMirror-code",
+    "dropdownSingleSelect": ".bp3-popover-target > div > .bp3-button",
     "defaultSingleSelectValue": ".bp3-popover-target > div > .bp3-button > .bp3-button-text",
     "widgetBtn": ".t--widget-buttonwidget button",
     "actionSelect": ".t--open-dropdown-Select-Action",
diff --git a/app/client/src/widgets/DropdownWidget.tsx b/app/client/src/widgets/DropdownWidget.tsx
index 8c7f613fc7..c50828fd67 100644
--- a/app/client/src/widgets/DropdownWidget.tsx
+++ b/app/client/src/widgets/DropdownWidget.tsx
@@ -101,7 +101,11 @@ class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
   onOptionSelected = (selectedOption: DropdownOption) => {
     let isChanged = true;
     if (this.props.selectionType === "SINGLE_SELECT") {
-      isChanged = !(this.props.selectedOption.value === selectedOption.value);
+      // Check if the value has changed. If no option
+      // selected till now, there is a change
+      if (this.props.selectedOption) {
+        isChanged = !(this.props.selectedOption.value === selectedOption.value);
+      }
       if (isChanged) {
         this.props.updateWidgetMetaProperty(
           "selectedOptionValue",