Skip to content

Commit

Permalink
Autocomplete Focus out fix (#522)
Browse files Browse the repository at this point in the history 
* focus out changes

* updated package version
  • Loading branch information
@yerramshilpa
yerramshilpa authored Oct 8, 2020
1 parent 020f4ba commit 8d2a8fe
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 150 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@gsa-sam/sam-ui-elements",
"version": "1.0.16",
"version": "1.0.17",
"description": "SAM UI library",
"repository": {
"type": "git",
Expand Down
197 changes: 50 additions & 147 deletions ...form-controls/sam-sds-autocomplete/autocomplete-search/autocomplete-search.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,36 @@
<div
sam-click-outside
(clickOutside)="checkForFocus($event)"
sam-tab-outside
(tabOutside)="checkForFocus($event)"
>
<div sam-click-outside (clickOutside)="clickOutSide($event)" sam-tab-outside (tabOutside)="clickOutSide($event)">
<div class="input-container">
<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"
[ngClass]="getClass()"
#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" [ngClass]="getClass()" #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]="
" [attr.aria-controls]="
showResults ? configuration.id + '-listbox' : undefined
"
autocomplete="off"
/>
" 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">
<li
[attr.id]="configuration.id + '-resultItem-' + i"
role="option"
[ngClass]="{
<li [attr.id]="configuration.id + '-resultItem-' + i" role="option" [ngClass]="{
'sds-autocomplete__group': configuration.isGroupingEnabled,
'sds-autocomplete__item': !configuration.isGroupingEnabled,
'sds-autocomplete__item--highlighted':
result['highlighted'] && !configuration.isGroupingEnabled,
'sds-autocomplete__item--selected':
checkItemSelected(result) && !configuration.isGroupingEnabled
}"
*ngFor="let result of results; let i = index"
(click)="!configuration.isSelectableGroup ? '' : selectItem(result)"
>
<ng-container
*ngIf="itemTemplate"
[ngTemplateOutlet]="itemTemplate"
[ngTemplateOutletContext]="{ $implicit: result }"
>
}" *ngFor="let result of results; let i = index"
(click)="!configuration.isSelectableGroup ? '' : selectItem(result)">
<ng-container *ngIf="itemTemplate" [ngTemplateOutlet]="itemTemplate"
[ngTemplateOutletContext]="{ $implicit: result }">
</ng-container>
<ng-container *ngIf="!itemTemplate">
<div
[ngClass]="{
<div [ngClass]="{
'sds-autocomplete__item': configuration.isGroupingEnabled,
'sds-autocomplete__item--highlighted':
configuration.isGroupingEnabled && result['highlighted'],
Expand All @@ -78,35 +39,23 @@
configuration.isGroupingEnabled,
'sds-autocomplete__item--selected':
checkItemSelected(result) && configuration.isGroupingEnabled
}"
>
<div
[ngClass]="{
}">
<div [ngClass]="{
'text-semibold': configuration.secondaryTextField
}"
>
}">
{{ getObjectValue(result, configuration.primaryTextField) }}
</div>
<ng-container
*ngIf="
<ng-container *ngIf="
configuration.secondaryTextField &&
result[configuration.secondaryTextField]
"
>
">
<div>{{ result[configuration.secondaryTextField] }}</div>
</ng-container>
</div>

<ul
class="usa-list usa-list--unstyled"
#childrenList
[attr.id]="configuration.id + '-childrenlistbox-'"
role="listbox"
>
<li
[attr.id]="configuration.id + '-childItem-' + j"
role="option"
[ngClass]="{
<ul class="usa-list usa-list--unstyled" #childrenList [attr.id]="configuration.id + '-childrenlistbox-'"
role="listbox">
<li [attr.id]="configuration.id + '-childItem-' + j" role="option" [ngClass]="{
'sds-autocomplete__group':
child[configuration.groupByChild]?.length,
'sds-autocomplete__item': !child[configuration.groupByChild]
Expand All @@ -117,15 +66,11 @@
'sds-autocomplete__item--selected':
checkItemSelected(child) &&
!child[configuration.groupByChild]?.length
}"
*ngFor="
}" *ngFor="
let child of result[configuration.groupByChild];
let j = index
"
(click)="selectItem(child)"
>
<div
[ngClass]="{
" (click)="selectItem(child)">
<div [ngClass]="{
'sds-autocomplete__item':
child[configuration.groupByChild]?.length,
'sds-autocomplete__item--highlighted':
Expand All @@ -137,67 +82,48 @@
'sds-autocomplete__item--selected':
checkItemSelected(child) &&
child[configuration.groupByChild]?.length
}"
>
<div
[ngClass]="{
}">
<div [ngClass]="{
'text-semibold': configuration.secondaryTextField
}"
>
}">
{{ getObjectValue(child, configuration.primaryTextField) }}
</div>

<div
*ngIf="
<div *ngIf="
configuration.secondaryTextField &&
child[configuration.secondaryTextField]
"
>
">
{{ child[configuration.secondaryTextField] }}
</div>
</div>
<ul
class="usa-list usa-list--unstyled"
#childrenItems
[attr.id]="configuration.id + '-grandchildren-'"
role="listbox"
>
<li
[attr.id]="configuration.id + '-grandchildren-' + k"
role="option"
class="sds-autocomplete__item"
<ul class="usa-list usa-list--unstyled" #childrenItems [attr.id]="configuration.id + '-grandchildren-'"
role="listbox">
<li [attr.id]="configuration.id + '-grandchildren-' + k" role="option" class="sds-autocomplete__item"
[ngClass]="{
'sds-autocomplete__item--selected': checkItemSelected(
subchild
),
'sds-autocomplete__item--highlighted':
subchild['highlighted']
}"
*ngFor="
}" *ngFor="
let subchild of child[configuration.groupByChild];
let k = index
"
(click)="selectItem(subchild)"
>
" (click)="selectItem(subchild)">
<div>
<div
[ngClass]="{
<div [ngClass]="{
'text-semibold': configuration.secondaryTextField
}"
>
}">
{{
getObjectValue(
subchild,
configuration.primaryTextField
)
}}

<div
*ngIf="
<div *ngIf="
configuration.secondaryTextField &&
subchild[configuration.secondaryTextField]
"
>
">
{{ subchild[configuration.secondaryTextField] }}
</div>
</div>
Expand Down Expand Up @@ -225,39 +151,16 @@
</ul>
<ng-container *ngIf="!input.disabled">
<span class="close">
<span
*ngIf="inputValue && !disabled"
tabindex="0"
role="button"
class="fa fa-times"
aria-label="Clear input"
aria-hidden="false"
(click)="clearInput()"
(keyup.enter)="clearInput()"
>
<span *ngIf="inputValue && !disabled" tabindex="0" role="button" class="fa fa-times" aria-label="Clear input"
aria-hidden="false" (click)="clearInput()" (keyup.enter)="clearInput()">
</span>
<span *ngIf="!configuration.isTagModeEnabled">
<span
*ngIf="!showResults && !disabled"
tabindex="1"
role="button"
class="fa fa-caret-down"
aria-label="down arrow"
aria-hidden="false"
(click)="openOptions()"
(keyup.enter)="openOptions()"
>
<span *ngIf="!showResults && !disabled" tabindex="1" role="button" class="fa fa-caret-down"
aria-label="down arrow" aria-hidden="false" (click)="openOptions()" (keyup.enter)="openOptions()">
</span>
<span
*ngIf="showResults && !disabled"
tabindex="2"
role="button"
class="fa fa-caret-up"
aria-label="arrow up arrow"
aria-hidden="false"
(click)="checkForFocus($event)"
(keyup.enter)="checkForFocus($event)"
>
<span *ngIf="showResults && !disabled" tabindex="2" role="button" class="fa fa-caret-up"
aria-label="arrow up arrow" aria-hidden="false" (click)="checkForFocus($event)"
(keyup.enter)="checkForFocus($event)">
</span>
</span>
</span>
Expand All @@ -267,4 +170,4 @@
<li>{{ srOnlyText }}</li>
</ul>
</div>
</div>
</div>
12 changes: 10 additions & 2 deletions ...t/form-controls/sam-sds-autocomplete/autocomplete-search/autocomplete-search.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,6 +202,7 @@ export class SAMSDSAutocompleteSearchComponent implements ControlValueAccessor {
* @param event
*/
checkForFocus(event): void {
console.log(this.model, '---focusout----')
if (this.configuration) {
if (
this.configuration.isTagModeEnabled ||
Expand All @@ -227,6 +228,11 @@ export class SAMSDSAutocompleteSearchComponent implements ControlValueAccessor {
}
}

clickOutSide(event): void {
this.focusRemoved();
this.showResults = false;
}

/**
*
*/
Expand All @@ -239,15 +245,17 @@ export class SAMSDSAutocompleteSearchComponent implements ControlValueAccessor {
if (this.configuration.isTagModeEnabled || this.configuration.isFreeTextEnabled) {
if (
SAMSDSSelectedItemModelHelper.containsItem(
val,
val[this.configuration.primaryKeyField],
this.configuration.primaryKeyField,
this.model.items
)
) {
console.log('test outside')
SAMSDSSelectedItemModelHelper.clearItems(this.model);
this.propogateChange(this.model);
this.selectItem(this.createFreeTextItem(val));
} else {
} else if (this.model.items.length <= 0) {
console.log('else test outside')
this.selectItem(this.createFreeTextItem(val));
}
}
Expand Down

0 comments on commit 8d2a8fe

Please sign in to comment.