[UXP-184] Fix after merge with 7.6.2

Author: atarix83

src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html

@@ -61,12 +61,12 @@
               [attr.id]="listEntry.display == (currentValue|async) ? ('combobox_' + id + '_selected') : null">
         {{inputFormatter(listEntry)}}
       </button>
-      <div class="d-flex align-items-center pl-4 pr-3 py-2" id="otherOption"
+      <div class="d-flex align-items-center pl-4 pr-3 py-2" data-test="otherOption"
            *ngIf="model.openType && (pageInfo.currentPage >= pageInfo.totalPages)">
         <label class="m-0">{{'form.other-option' | translate}}</label>
-        <input id="otherOptionInput" type="text" class="form-control form-control-sm mx-2" [(ngModel)]="otherListEntry" (keyup.enter)="addListItem(sdRef)" />
-        <button id="otherOptionBtn" class="btn btn-primary btn-sm" type="button"
-                (click)="addListItem(sdRef)" [disabled]="addButoonDisabled">
+        <input data-test="otherOptionInput" type="text" class="form-control form-control-sm mx-2" [(ngModel)]="otherListEntry" (keyup.enter)="addListItem(sdRef)" />
+        <button data-test="otherOptionBtn" class="btn btn-primary btn-sm" type="button"
+                (click)="addListItem(sdRef)" [disabled]="addButtonDisabled">
           {{'form.other-option.add-button' | translate}}
         </button>
       </div>

src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.spec.ts

@@ -151,31 +151,33 @@ describe('Dynamic Dynamic Scrollable Dropdown component', () => {
       });
 
       it('should display other dropdown menu option', () => {
-        scrollableDropdownComp.model.openType = true;
-        scrollableDropdownComp.pageInfo.currentPage = 2;
-        scrollableDropdownComp.pageInfo.totalPages = 1;
         const de = scrollableDropdownFixture.debugElement.query(By.css('input.form-control'));
         const btnEl = de.nativeElement;
-
         btnEl.click();
+        scrollableDropdownFixture.detectChanges();
 
+        scrollableDropdownComp.model.openType = true;
+        scrollableDropdownComp.pageInfo.currentPage = 2;
+        scrollableDropdownComp.pageInfo.totalPages = 1;
         scrollableDropdownFixture.detectChanges();
-        const deMenu = scrollableDropdownFixture.debugElement.query(By.css('#otherOption'));
+
+        const deMenu = scrollableDropdownFixture.debugElement.query(By.css('[data-test="otherOption"]'));
 
         expect(deMenu).toBeTruthy();
       });
 
       it('should not display other dropdown menu option', () => {
-        scrollableDropdownComp.model.openType = true;
-        scrollableDropdownComp.pageInfo.currentPage = 2;
-        scrollableDropdownComp.pageInfo.totalPages = 3;
         const de = scrollableDropdownFixture.debugElement.query(By.css('input.form-control'));
         const btnEl = de.nativeElement;
-
         btnEl.click();
+        scrollableDropdownFixture.detectChanges();
 
+        scrollableDropdownComp.model.openType = true;
+        scrollableDropdownComp.pageInfo.currentPage = 2;
+        scrollableDropdownComp.pageInfo.totalPages = 3;
         scrollableDropdownFixture.detectChanges();
-        const deMenu = scrollableDropdownFixture.debugElement.query(By.css('#otherOption'));
+
+        const deMenu = scrollableDropdownFixture.debugElement.query(By.css('[data-test="otherOption"]'));
 
         expect(deMenu).toBeFalsy();
       });
@@ -215,17 +217,20 @@ describe('Dynamic Dynamic Scrollable Dropdown component', () => {
       it('should add other dropdown option value', () => {
         const selectedValue = Object.assign(new VocabularyEntry(), { authority: 3, display: 'three', value: 'three' });
         spyOn((scrollableDropdownComp as any), 'addListItem');
-        scrollableDropdownComp.model.openType = true;
-        scrollableDropdownComp.pageInfo.currentPage = 2;
-        scrollableDropdownComp.pageInfo.totalPages = 1;
+
         const de = scrollableDropdownFixture.debugElement.query(By.css('input.form-control'));
         let btnEl = de.nativeElement;
 
         btnEl.click();
+        scrollableDropdownFixture.detectChanges();
 
+        scrollableDropdownComp.model.openType = true;
+        scrollableDropdownComp.pageInfo.currentPage = 2;
+        scrollableDropdownComp.pageInfo.totalPages = 1;
         scrollableDropdownFixture.detectChanges();
+
         scrollableDropdownComp.otherListEntry = selectedValue.value;
-        btnEl = scrollableDropdownFixture.debugElement.nativeElement.querySelector('#otherOptionBtn');
+        btnEl = scrollableDropdownFixture.debugElement.nativeElement.querySelector('[data-test="otherOptionBtn"]');
 
         btnEl.click();
         scrollableDropdownFixture.detectChanges();

src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts

@@ -61,7 +61,7 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
   public selectedIndex = 0;
   public acceptableKeys = ['Space', 'NumpadMultiply', 'NumpadAdd', 'NumpadSubtract', 'NumpadDecimal', 'Semicolon', 'Equal', 'Comma', 'Minus', 'Period', 'Quote', 'Backquote'];
   public otherListEntry = '';
-  public addButoonDisabled = false;
+  public addButtonDisabled = false;
 
 
   /**
@@ -75,7 +75,7 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
   filterTextChanged: Subject<string> = new Subject<string>();
 
   /**
-   * The subscribtion to be utilized on destroy to remove filterTextChange subscription
+   * The subscription to be utilized on destroy to remove filterTextChange subscription
    */
   subSearch: Subscription;
 
@@ -201,7 +201,7 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
     this.inputText += keyName;
     // When a new key is added, we need to reset the page info
     this.updatePageInfo(this.model.maxOptions, 1);
-    this.retrieveEntries(null, false);
+    this.retrieveEntries(this.inputText, false);
   }
 
   removeKeyFromInput() {
@@ -210,7 +210,7 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
       if (this.inputText === '') {
         this.inputText = null;
       }
-      this.retrieveEntries(null, false);
+      this.retrieveEntries(this.inputText, false);
     }
   }
 
@@ -337,7 +337,7 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
    */
   addListItem(sdRef: NgbDropdown) {
     let entryCount = 0;
-    this.addButoonDisabled = true;
+    this.addButtonDisabled = true;
     if (this.otherListEntry.toString() !== '') {
       if (this.optionsList.length > 0) {
         this.optionsList.forEach(element => {
@@ -353,12 +353,12 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
         this.optionsList.push(object);
         this.onSelect(object);
         sdRef.close();
-        this.addButoonDisabled = false;
+        this.addButtonDisabled = false;
       } else {
-        this.addButoonDisabled = false;
+        this.addButtonDisabled = false;
       }
     } else {
-      this.addButoonDisabled = false;
+      this.addButtonDisabled = false;
     }
   }