Autocomplete tags

libs/packages/components/src/lib/autocomplete-search/autocomplete-search.component.html

@@ -1,24 +1,20 @@
 <div sds-click-outside (clickOutside)="checkForFocus($event)" sds-tab-outside (tabOutside)="checkForFocus($event)">
   <div class="maxw-mobile-lg position-relative">
-    <div role="combobox" [attr.id]="configuration.id+'-container'" [attr.aria-expanded]="showResults"
-      [attr.aria-owns]="showResults? configuration.id+ '-listbox' : undefined" aria-haspopup="listbox">
-      <input [disabled]="disabled" (keypress)="onkeypress($event)" (input)="textChange($event)" class="usa-input padding-right-3" #input  [attr.aria-label]="configuration.ariaLabelText"
-        [attr.id]="configuration.id" type="text" (focus)="inputFocusHandler()" (keydown)="onKeydown($event)"
-        [(ngModel)]="inputValue" aria-autocomplete="list" [attr.placeholder]="configuration.autocompletePlaceHolderText"
+    <div role="combobox" [attr.id]="configuration.id+'-container'" [attr.aria-expanded]="showResults" [attr.aria-owns]="showResults? configuration.id+ '-listbox' : undefined"
+      aria-haspopup="listbox">
+      <input [disabled]="disabled" (keypress)="onkeypress($event)" (input)="textChange($event)" class="usa-input padding-right-3"
+        #input [attr.aria-label]="configuration.ariaLabelText" [attr.id]="configuration.id" type="text" (focus)="inputFocusHandler()"
+        (keydown)="onKeydown($event)" [(ngModel)]="inputValue" aria-autocomplete="list" [attr.placeholder]="configuration.autocompletePlaceHolderText"
         [attr.aria-activedescendant]="showResults? configuration.id+'-resultItem-'+highlightedIndex :''"
-        [attr.aria-controls]="showResults? configuration.id+ '-listbox' : undefined"
-        autocomplete="off">
+        [attr.aria-controls]="showResults? configuration.id+ '-listbox' : undefined" autocomplete="off">
     </div>
-    <ul #resultsList *ngIf="showResults" [attr.id]="configuration.id+ '-listbox'" role="listbox"
-      class="usa-list usa-list--unstyled sds-autocomplete" (scroll)="onScroll()">
+    <ul #resultsList *ngIf="showResults" [attr.id]="configuration.id+ '-listbox'" role="listbox" class="usa-list usa-list--unstyled sds-autocomplete"
+      (scroll)="onScroll()">
       <ng-container *ngIf="(results && results.length > 0)">
         <li [attr.id]="configuration.id+'-resultItem-'+i" role="option" *ngFor="let result of results; let i = index"
-          (mouseenter)="listItemHover(i)"
-          [class]="result['highlighted'] ? 'sds-autocomplete__item sds-autocomplete__item--selected' : 'sds-autocomplete__item' "
+          (mouseenter)="listItemHover(i)" [class]="result['highlighted'] ? 'sds-autocomplete__item sds-autocomplete__item--selected' : 'sds-autocomplete__item' "
           (click)="selectItem(result)">
-          <ng-container *ngIf="itemTemplate" [ngTemplateOutlet]="itemTemplate"
-            [ngTemplateOutletContext]="{$implicit:result}">
-
+          <ng-container *ngIf="itemTemplate" [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{$implicit:result}">
           </ng-container>
 
           <ng-container *ngIf="!itemTemplate">
@@ -59,17 +55,18 @@
 
     <ng-container *ngIf="!input.disabled">
       <span class="position-absolute right-105 top-1 cursor-pointer">
-        <span tabindex="0" role="button" aria-label="Clear input" aria-hidden="false" (click)="clearInput()"
+        <span *ngIf="inputValue" tabindex="0" role="button" aria-label="Clear input" aria-hidden="false" (click)="clearInput()"
           (keyup.enter)="clearInput()">
           <fa-icon [icon]="['fas', 'times']" size="xs"></fa-icon>
         </span>
-        <span tabindex="1" role="button" aria-label="Clear input" aria-hidden="false" class="margin-left-1">
-          <fa-icon *ngIf="!showResults" (click)="inputFocusHandler()" [icon]="['fas', 'caret-down']" size="xs"></fa-icon>
-          <fa-icon *ngIf="showResults" (click)="checkForFocus($event)" [icon]="['fas', 'caret-up']" size="xs"></fa-icon>
+        <span *ngIf="!configuration.isTagModeEnabled" tabindex="1" role="button" aria-label="Clear input" aria-hidden="false"
+          class="margin-left-1">
+          <fa-icon *ngIf="!showResults" (click)="inputFocusHandler()" [icon]="['fas', 'caret-down']" size="sm"></fa-icon>
+          <fa-icon *ngIf="showResults" (click)="checkForFocus($event)" [icon]="['fas', 'caret-up']" size="sm"></fa-icon>
         </span>
       </span>
     </ng-container>
     <ul class="usa-sr-only" aria-live="assertive">
       <li>{{srOnlyText}}</li>
     </ul>
-  </div>
+  </div>

libs/packages/components/src/lib/autocomplete-search/autocomplete-search.component.spec.ts

@@ -423,4 +423,68 @@ describe('SamAutocompleteComponent', () => {
     expect(component.resultsListElement).toBeDefined();
   }));
 
+  it('Should have enable tag mode', fakeAsync(() => {
+    component.configuration.isTagModeEnabled = true;
+    component.inputValue = 'searchtext';
+    const event = {
+      "key": "Enter",
+      target: { "value": component.inputValue }
+    }
+    component.onKeydown(event);
+    fixture.detectChanges();
+    tick();
+    fixture.detectChanges();
+    expect(component.model.items.length).toBe(1);
+
+  }));
+
+  it('Should have input read only', fakeAsync(() => {
+    component.configuration.inputReadOnly = true;
+    const event = {
+      "key": "a",
+    }
+    component.onkeypress(event);
+    fixture.detectChanges();
+    tick();
+    fixture.detectChanges();
+    fixture.detectChanges();
+    const input = fixture.debugElement.query(By.css('.usa-input'));
+    expect(input.nativeElement.value).toBe("");
+  }));
+
+  it('Should not trigger backspace event input read only', fakeAsync(() => {
+    component.inputValue = 'Search';
+    component.configuration.inputReadOnly = true;
+    const event = {
+      "key": "Backspace",
+      preventDefault: ()=>{},
+      target: {
+        "value": component.inputValue,
+
+      }
+    }
+    component.onKeydown(event);
+    fixture.detectChanges();
+    tick();
+    fixture.detectChanges();
+
+    console.log(event);
+    const input = fixture.debugElement.query(By.css('.usa-input'));
+    expect(input.nativeElement.value).toBe("Search");
+  }));
+  it('Should have input not read only', fakeAsync(() => {
+    component.inputValue = 'a';
+   const event = {
+      "key": "a",
+      target: { "value": component.inputValue }
+    }
+    component.onkeypress(event);
+    fixture.detectChanges();
+    tick();
+    fixture.detectChanges();
+    fixture.detectChanges();
+    const input = fixture.debugElement.query(By.css('.usa-input'));
+    expect(input.nativeElement.value).toBe("a");
+  }));
+
 });

libs/packages/components/src/lib/autocomplete-search/autocomplete-search.component.ts

@@ -124,6 +124,7 @@ export class SDSAutocompleteSearchComponent implements ControlValueAccessor {
   private resultsAvailableMessage: string = ' results available. Use up and down arrows\
   to scroll through results. Hit enter to select.';
 
+  private index = 0;
   /**
    * Gets the string value from the specifed properties of an object
    * @param object 
@@ -199,9 +200,10 @@ export class SDSAutocompleteSearchComponent implements ControlValueAccessor {
   }
 
   onkeypress(ev) {
-    return this.inputReadOnly ? false: true;
+    return this.configuration.inputReadOnly ? false: true;
   }
   textChange(event) {
+    if (!this.configuration.isTagModeEnabled) {
     // ie 11 placeholders will incorrectly trigger input events (known bug)
     // if input isn't active element then don't do anything
     if (event.target != document.activeElement) {
@@ -211,16 +213,19 @@ export class SDSAutocompleteSearchComponent implements ControlValueAccessor {
     const searchString = event.target.value || '';
     this.getResults(searchString);
   }
+}
 
   /**
    * Event method used when focus is gained to the input
    */
   inputFocusHandler(): void {
+    if (!this.configuration.isTagModeEnabled) {
     if (this.configuration.focusInSearch) {
       this.getResults(this.inputValue || '');
     }
     this.onTouchedCallback();
   }
+}
 
   /**
    * Key event
@@ -229,6 +234,10 @@ export class SDSAutocompleteSearchComponent implements ControlValueAccessor {
   onKeydown(event): void {
     if (KeyHelper.is(KEYS.TAB, event)) {
       return;
+    } else if (KeyHelper.is(KEYS.BACKSPACE, event)) {
+      if(this.configuration.inputReadOnly){
+        event.preventDefault();
+      }
     }
     else if (KeyHelper.is(KEYS.DOWN, event)) {
       this.onArrowDown();
@@ -238,7 +247,21 @@ export class SDSAutocompleteSearchComponent implements ControlValueAccessor {
       this.onArrowUp();
     }
     else if (KeyHelper.is(KEYS.ENTER, event) && this.highlightedIndex >= 0) {
-      this.selectItem(this.highlightedItem);
+    if (this.configuration.isTagModeEnabled) {
+      const item = {};
+      item[this.configuration.primaryKeyField] = this.index++;
+      item[this.configuration.primaryTextField] = this.inputValue;
+      SDSSelectedItemModelHelper.addItem(
+        item,
+        this.configuration.primaryKeyField,
+        this.configuration.selectionMode,
+        this.model.items
+      );
+      this.propogateChange(this.model);
+      this.focusRemoved();
+    } else {
+    this.selectItem(this.highlightedItem);
+     }
     }
     else if (KeyHelper.is(KEYS.ENTER, event) && this.highlightedIndex < 0) {
       const item = this.createFreeTextItem();

libs/packages/components/src/lib/autocomplete-search/models/SDSAutocompleteConfiguration.ts

@@ -75,4 +75,15 @@ export class SDSAutocompleteSearchConfiguration {
    * The aria-label for the auto-complete
    */
   public ariaLabelText: string = 'Auto Complete';
+
+  /**
+   * To enable the tag mode
+   */
+  public isTagModeEnabled: boolean =false;
+
+    /**
+   * To make input readonly
+   */
+  public inputReadOnly = false;
+
 }

libs/packages/components/src/lib/autocomplete/models/SDSAutocompletelConfiguration.model.ts

@@ -76,4 +76,15 @@ export class SDSAutocompletelConfiguration implements SDSSelectedResultConfigura
    * The aria-label for the auto-complete
    */
   public ariaLabelText: string = 'Auto Complete';
+
+   /**
+   * To enable the tag mode
+   */
+  public isTagModeEnabled: boolean =false;
+
+    /**
+   * To make input readonly
+   */
+  public inputReadOnly = false;
+
 }

package.json

@@ -57,7 +57,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.22",
     "@fortawesome/free-brands-svg-icons": "^5.12.0",
     "@fortawesome/free-solid-svg-icons": "^5.10.2",
-    "@gsa-sam/sam-styles": "^0.0.65",
+    "@gsa-sam/sam-styles": "^0.0.66",
     "@ngrx/effects": "6.1.2",
     "@ngrx/router-store": "6.1.2",
     "@ngrx/store": "6.1.2",