fix(autocomplete): checkbox no longer appears in front of autocomplet…

…e options (#1565)
GetTerminus · Jun 21, 2019 · cb3ca47 · cb3ca47
1 parent bdf3d46
commit cb3ca47
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 14 deletions.
diff --git a/terminus-ui/autocomplete/src/autocomplete.component.spec.ts b/terminus-ui/autocomplete/src/autocomplete.component.spec.ts
@@ -681,6 +681,23 @@ describe(`TsAutocompleteComponent`, function() {
 
     });
 
+    describe(`checkbox`, function() {
+
+      test(`should not have checkbox in front of an item list`, fakeAsync(() => {
+        const fixture = createComponent(testComponents.AutocompleteAllowMultipleNoReopen);
+        fixture.detectChanges();
+
+        const input = getAutocompleteInput(fixture);
+        typeInElement('al', input);
+        tick(1000);
+        fixture.detectChanges();
+        const opt = getOptionElement(fixture, 0, 1);
+        fixture.detectChanges();
+        expect(opt.querySelectorAll('ts-checkbox')).toHaveLength(0);
+
+      }));
+    });
+
   });
 
 

diff --git a/terminus-ui/autocomplete/src/autocomplete.component.ts b/terminus-ui/autocomplete/src/autocomplete.component.ts
@@ -145,6 +145,11 @@ export class TsAutocompleteComponent implements OnInit,
   OnDestroy,
   TsFormFieldControl<string> {
 
+  /**
+   * Give the component an explicit name
+   */
+  public readonly componentName = 'TsAutocompleteComponent';
+
   /**
    * Define the FormControl
    */

diff --git a/terminus-ui/option/src/option.component.ts b/terminus-ui/option/src/option.component.ts
@@ -53,6 +53,7 @@ export class TsOptionSelectionChange {
  * Contains properties that the options can inherit. Used by {@link TS_OPTION_PARENT_COMPONENT}
  */
 export interface TsOptionParentComponent {
+  componentName: string;
   allowMultiple: boolean;
   theme: TsStyleThemeTypes;
   ngControl?: NgModel;
@@ -289,18 +290,11 @@ export class TsOptionComponent implements Highlightable, AfterContentInit, After
     // Injecting via a provider helps us get around the circular dependency created by importing TsSelectComponent here.
     @Optional() @Inject(TS_OPTION_PARENT_COMPONENT) private parent: TsOptionParentComponent,
     @Optional() @Inject(TS_OPTGROUP_PARENT_COMPONENT) public readonly group: TsOptgroupParentComponent,
-    private viewContainerRef: ViewContainerRef,
   ) {
-    // From view container ref to decide the parent component. Possible refactoring with injector.
-    // eslint-disable-next-line dot-notation
-    if (this.viewContainerRef['_data'].componentView) {
-      // eslint-disable-next-line dot-notation
-      const parentComponent = this.viewContainerRef['_data'].componentView.parent.component.constructor.name.toLowerCase();
-      if (parentComponent.includes('autocomplete')) {
-        this.autocompleteComponent = true;
-      } else if (parentComponent.includes('select')) {
-        this.selectComponent = true;
-      }
+    if (parent.componentName.includes('Autocomplete')) {
+      this.autocompleteComponent = true;
+    } else if (parent.componentName.includes('Select')) {
+      this.selectComponent = true;
     }
   }
 

diff --git a/terminus-ui/select/src/select.component.spec.ts b/terminus-ui/select/src/select.component.spec.ts
@@ -954,6 +954,19 @@ describe(`TsSelectComponent`, function() {
 
     });
 
+    describe(`checkbox`, function() {
+
+      test(`should have checkbox in front of each option item`, fakeAsync(() => {
+        const fixture = createComponent(testComponents.OptgroupsMultiple);
+        fixture.detectChanges();
+
+        fixture.detectChanges();
+        const opt = getOptionElement(fixture, 0, 1);
+        expect(opt.querySelector('ts-checkbox')).toBeTruthy();
+
+      }));
+    });
+
 
     describe(`handleKeydown`, function() {
 
@@ -992,7 +1005,7 @@ describe(`TsSelectComponent`, function() {
         const event = createKeyboardEvent('keydown', KEYS.ENTER);
         const instance = getSelectInstance(fixture);
         option.selectViaInteraction = jest.fn();
-        instance.open = jest.fn()
+        instance.open = jest.fn();
 
         instance.handleKeydown(event);
         expect(option.selectViaInteraction).not.toHaveBeenCalled();
@@ -1005,11 +1018,11 @@ describe(`TsSelectComponent`, function() {
         const event = createKeyboardEvent('keydown', KEYS.ENTER);
         const instance = getSelectInstance(fixture);
         option.selectViaInteraction = jest.fn();
-        instance.open = jest.fn()
+        instance.open = jest.fn();
 
         instance.handleKeydown(event);
         expect(instance.open).toHaveBeenCalled();
-      })
+      });
     });
 
 

diff --git a/terminus-ui/select/src/select.component.ts b/terminus-ui/select/src/select.component.ts
@@ -256,6 +256,11 @@ export class TsSelectComponent implements
   OnDestroy,
   TsFormFieldControl<unknown> {
 
+  /**
+   * Give the component an explicit name
+   */
+  public readonly componentName = 'TsSelectComponent';
+
   /**
    * Store a reference to the document object
    */