Fix oppia#19545: Exploration editor category creating new categories when selecting old ones. (oppia#19549)

* Fix Exploration Editor Category Select

* Change to Value Change

Author: jnvtnguyen

core/templates/pages/exploration-editor-page/settings-tab/settings-tab.component.html

@@ -36,16 +36,16 @@ <h3 class="e2e-test-settings-container" tabindex="0">Basic Settings</h3>
                   <p>
                     <mat-form-field class="e2e-test-exploration-category" appearance="fill">
                       <mat-label for="explorationCategory" class="d-block">Add a category (Choose or type new)</mat-label>
-                      <mat-select [(value)]="explorationCategoryService.displayed" class="e2e-test-exploration-category-dropdown">
+                      <mat-select [(value)]="explorationCategoryService.displayed"
+                                  (valueChange)="updateCategoryListWithUserData()"
+                                  class="e2e-test-exploration-category-dropdown">
                         <mat-option class="e2e-test-exploration-new-category-add">
                           <ngx-mat-select-search ngModel
                                                  (ngModelChange)="filterChoices($event)"
-                                                 (keydown.enter)="updateCategoryListWithUserData()"
                                                  placeholderLabel="Type new category here...">
                           </ngx-mat-select-search>
                         </mat-option>
-                        <mat-option (click)="updateCategoryListWithUserData()"
-                                    *ngFor="let option of filteredChoices"
+                        <mat-option *ngFor="let option of filteredChoices"
                                     class="e2e-test-exploration-category-selector-choice"
                                     [value]="option.id">
                           {{ option.text }}

core/templates/pages/exploration-editor-page/settings-tab/settings-tab.component.spec.ts

@@ -297,6 +297,40 @@ describe('Settings Tab Component', () => {
       flush();
     }));
 
+  it('should not create new category if it is not selected',
+    fakeAsync(() => {
+      spyOn(explorationCategoryService, 'saveDisplayedValue').and.stub();
+
+      explorationCategoryService.displayed = 'old';
+      component.newCategory = {
+        id: 'new',
+        text: 'new'
+      };
+
+      component.updateCategoryListWithUserData();
+      tick();
+
+      expect(explorationCategoryService.displayed).toBe('old');
+      expect(explorationCategoryService.saveDisplayedValue).toHaveBeenCalled();
+    }));
+
+  it('should be able to create new category if it is selected',
+    fakeAsync(() => {
+      spyOn(explorationCategoryService, 'saveDisplayedValue').and.stub();
+
+      explorationCategoryService.displayed = 'new';
+      component.newCategory = {
+        id: 'new',
+        text: 'new'
+      };
+
+      component.updateCategoryListWithUserData();
+      tick();
+
+      expect(explorationCategoryService.displayed).toBe('new');
+      expect(explorationCategoryService.saveDisplayedValue).toHaveBeenCalled();
+    }));
+
   it('should be able to add exploration editor tags',
     fakeAsync(() => {
       spyOn(component, 'saveExplorationTags').and.stub();

core/templates/pages/exploration-editor-page/settings-tab/settings-tab.component.ts

@@ -218,7 +218,9 @@ export class SettingsTabComponent
   }
 
   updateCategoryListWithUserData(): void {
-    if (this.newCategory) {
+    if (this.newCategory &&
+      (this.explorationCategoryService.displayed === this.newCategory.id)
+    ) {
       this.CATEGORY_LIST_FOR_SELECT2.push(this.newCategory);
       this.explorationCategoryService.displayed = this.newCategory.id;
     }