diff --git a/projects/ngx-cream-lib/src/lib/autocomplete/autocomplete.component.spec.ts b/projects/ngx-cream-lib/src/lib/autocomplete/autocomplete.component.spec.ts index c8df2b8..ff57505 100644 --- a/projects/ngx-cream-lib/src/lib/autocomplete/autocomplete.component.spec.ts +++ b/projects/ngx-cream-lib/src/lib/autocomplete/autocomplete.component.spec.ts @@ -8,9 +8,8 @@ describe('AutocompleteComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ AutocompleteComponent ] - }) - .compileComponents(); + declarations: [AutocompleteComponent], + }).compileComponents(); fixture = TestBed.createComponent(AutocompleteComponent); component = fixture.componentInstance; diff --git a/projects/ngx-cream-lib/src/lib/autocomplete/autocomplete.component.ts b/projects/ngx-cream-lib/src/lib/autocomplete/autocomplete.component.ts index c3f3965..5ed5378 100644 --- a/projects/ngx-cream-lib/src/lib/autocomplete/autocomplete.component.ts +++ b/projects/ngx-cream-lib/src/lib/autocomplete/autocomplete.component.ts @@ -12,7 +12,7 @@ export class AutocompleteComponent { @Input() acValue = ''; @Input() filteredList: Array = []; @Input() selectedValue = false; - @ViewChild('acInput') acInput!: ElementRef; + @ViewChild('acInput') acInput!: ElementRef; open(): void { this.isOpen = !this.isOpen; @@ -20,9 +20,12 @@ export class AutocompleteComponent { } close(): void { - setTimeout(() => { + if (this.selectedValue == false) { + // vérifier si acInput est vide pour que la scrollbar fonctionne + this.isOpen = true; + } else { this.isOpen = false; - }, 300); + } } escClose(event: KeyboardEvent): void { @@ -31,6 +34,31 @@ export class AutocompleteComponent { } } + navigationKeyDown(val: string) { + if (this.isOpen == true && this.selectedValue == true) { + //déplace le focus visuel vers la valeur suggérée suivante + } + + this.acInput.nativeElement.value = val; + if (val == '' && this.isOpen == false) { + // déplace le focus visuel sur la première option + } + } + + navigationKeyUp(val: string) { + if (this.isOpen == true && this.selectedValue == true) { + //déplace le focus visuel sur la dernière valeur suggérée + } + + this.acInput.nativeElement.value = val; + if (val == '') { + if (this.isOpen == false) { + this.isOpen = true; + } + // déplace le focus visuel sur la dernière option + } + } + onChange(e: any) { this.acValue = e.target.value; this.filteredList = this.values.filter(value => value.toLowerCase().startsWith(this.acValue.toLowerCase()));