From d4bf02a451f602e85d625044073e6678d4652035 Mon Sep 17 00:00:00 2001
From: CoryDCode <corydiers@google.com>
Date: Wed, 21 Jun 2017 19:05:36 -0700
Subject: [PATCH] Fixing variable dropdowns so they select the correct option.
 (#1184)

---
 accessible/field-segment.component.js         | 19 +++++++++++++++----
 accessible/variable-add-modal.component.js    |  4 ++--
 accessible/variable-remove-modal.component.js |  4 ++--
 accessible/variable-rename-modal.component.js |  4 ++--
 4 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/accessible/field-segment.component.js b/accessible/field-segment.component.js
index cdf48993d..8dda20d71 100644
--- a/accessible/field-segment.component.js
+++ b/accessible/field-segment.component.js
@@ -58,11 +58,10 @@ blocklyApp.FieldSegmentComponent = ng.core.Component({
       <template [ngIf]="isDropdown()">
         {{getPrefixText()}}
         <select [id]="mainFieldId" [name]="mainFieldId"
-                [ngModel]="mainField.getValue()" (ngModelChange)="setDropdownValue($event)"
+                [ngModel]="selectedOption" (ngModelChange)="setDropdownValue($event)"
                 (keydown.enter)="selectOption()"
                 tabindex="-1">
-          <option *ngFor="#option of dropdownOptions" value="{{option.value}}"
-                  [attr.select]="optionValue === option.value ? true : null">
+          <option *ngFor="#option of dropdownOptions" value="{{option.value}}">
             {{option.text}}
           </option>
         </select>
@@ -92,6 +91,7 @@ blocklyApp.FieldSegmentComponent = ng.core.Component({
   ngDoCheck: function() {
     if (this.isDropdown() && this.shouldBreakCache()) {
       this.optionValue = this.mainField.getValue();
+      this.fieldValue = this.mainField.getValue();
       this.rawOptions = this.mainField.getOptions();
       this.dropdownOptions = this.rawOptions.map(function(valueAndText) {
         return {
@@ -99,6 +99,13 @@ blocklyApp.FieldSegmentComponent = ng.core.Component({
           value: valueAndText[1]
         };
       });
+
+      // Set the currently selected value to the variable on the field.
+      for (var i = 0; i < this.dropdownOptions.length; i++) {
+        if (this.dropdownOptions[i].text === this.fieldValue) {
+          this.selectedOption = this.dropdownOptions[i].value;
+        }
+      }
     }
   },
   // Returns whether the mutable, cached information needs to be refreshed.
@@ -110,11 +117,15 @@ blocklyApp.FieldSegmentComponent = ng.core.Component({
 
     for (var i = 0; i < this.rawOptions.length; i++) {
       // Compare the value of the cached options with the values in the field.
-      if (newOptions[i][1] != this.rawOptions[i][1]) {
+      if (newOptions[i][0] != this.rawOptions[i][0]) {
         return true;
       }
     }
 
+    if (this.fieldValue != this.mainField.getValue()) {
+      return true;
+    }
+
     return false;
   },
   // Gets the prefix text, to be printed before a field.
diff --git a/accessible/variable-add-modal.component.js b/accessible/variable-add-modal.component.js
index e113b49fb..288aa896c 100644
--- a/accessible/variable-add-modal.component.js
+++ b/accessible/variable-add-modal.component.js
@@ -52,10 +52,10 @@ blocklyApp.VariableAddModalComponent = ng.core.Component({
                      aria-labelledby="inputLabel" />
             </p>
             <hr>
-            <button id="submitButton" (click)="submit()">
+            <button type="button" id="submitButton" (click)="submit()">
               SUBMIT
             </button>
-            <button id="cancelButton" (click)="dismissModal()">
+            <button type="button" id="cancelButton" (click)="dismissModal()">
               CANCEL
             </button>
           </form>
diff --git a/accessible/variable-remove-modal.component.js b/accessible/variable-remove-modal.component.js
index c6d70c9ca..e40433513 100644
--- a/accessible/variable-remove-modal.component.js
+++ b/accessible/variable-remove-modal.component.js
@@ -50,10 +50,10 @@ blocklyApp.VariableRemoveModalComponent = ng.core.Component({
 
           <form id="varForm">
             <hr>
-            <button id="yesButton" (click)="submit()">
+            <button type="button" id="yesButton" (click)="submit()">
               YES
             </button>
-            <button id="noButton" (click)="dismissModal()">
+            <button type="button" id="noButton" (click)="dismissModal()">
               NO
             </button>
           </form>
diff --git a/accessible/variable-rename-modal.component.js b/accessible/variable-rename-modal.component.js
index fb4835064..82eac1c11 100644
--- a/accessible/variable-rename-modal.component.js
+++ b/accessible/variable-rename-modal.component.js
@@ -53,10 +53,10 @@ blocklyApp.VariableRenameModalComponent = ng.core.Component({
                      aria-labelledby="inputLabel" />
             </p>
             <hr>
-            <button id="submitButton" (click)="submit()">
+            <button type="button" id="submitButton" (click)="submit()">
               SUBMIT
             </button>
-            <button id="cancelButton" (click)="dismissModal()">
+            <button type="button" id="cancelButton" (click)="dismissModal()">
               CANCEL
             </button>
           </form>