modifs autocomplete

CreamLib · Feb 22, 2024 · e864979 · e864979
1 parent afcefa7
commit e864979
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 10 deletions.
diff --git a/projects/ngx-cream-lib/src/lib/autocomplete/autocomplete.component.css b/projects/ngx-cream-lib/src/lib/autocomplete/autocomplete.component.css
@@ -21,7 +21,7 @@
   padding: 0.5rem;
 }
 
-#b1-listbox li:hover {
+#b1-listbox li[aria-selected=true] {
   background-color: rgb(172, 172, 172);
 }
 
diff --git a/projects/ngx-cream-lib/src/lib/autocomplete/autocomplete.component.html b/projects/ngx-cream-lib/src/lib/autocomplete/autocomplete.component.html
@@ -1,9 +1,9 @@
-<label for="b1-input">{{ label }}</label>
+<label for="b1Input">{{ label }}</label>
 <div class="box box-list" (focusout)="close()" (keydown)="onKeyEsc()">
   <div class="group">
     <input
       #acInput
-      id="b1-input"
+      id="b1Input"
       class="b_edit"
       type="text"
       role="combobox"
@@ -17,8 +17,12 @@
       [attr.aria-expanded]="isOpen"
       aria-controls="b1-listbox" />
 
-    <ul id="b1-listbox" role="listbox" [ngClass]="{ 'active': isOpen }" aria-label="Values">
-      <li #options *ngFor="let li of filteredList" (click)="getSelectedValue(li)">
+    <ul #listbox id="b1-listbox" role="listbox" [ngClass]="{ 'active': isOpen }" aria-label="Values">
+      <li
+        #options
+        [attr.id]="'option-' + acInput.id + '-' + i"
+        *ngFor="let li of filteredList; let i = index"
+        (click)="getSelectedValue(li)">
         {{ li }}
       </li>
     </ul>

diff --git a/projects/ngx-cream-lib/src/lib/autocomplete/autocomplete.component.ts b/projects/ngx-cream-lib/src/lib/autocomplete/autocomplete.component.ts
@@ -14,6 +14,7 @@ export class AutocompleteComponent {
   @Input() values: Array<string> = [];
   @Input() filteredList: Array<string> = [];
   @ViewChild('acInput') acInput!: ElementRef;
+  @ViewChild('listbox') listbox!: ElementRef;
   @ViewChildren('options') options!: QueryList<ElementRef>;
   currentLi = -1;
 
@@ -24,7 +25,7 @@ export class AutocompleteComponent {
   }
 
   open(): void {
-    this.isOpen = !this.isOpen;
+    this.isOpen = true;
     this.onChange;
   }
 
@@ -45,13 +46,14 @@ export class AutocompleteComponent {
     }
 
     let li = this.options.toArray()[this.currentLi].nativeElement;
+    console.log(li);
     li.setAttribute('aria-selected', 'true');
   }
 
   goUp() {
     this.ariaNull();
-    if (this.currentLi + 1 > this.options.length) {
-      this.currentLi = 0;
+    if (this.currentLi === 0) {
+      this.currentLi = this.options.length - 1;
     } else {
       this.currentLi--;
     }
@@ -61,7 +63,9 @@ export class AutocompleteComponent {
   }
 
   onChange(e: any) {
-    this.isOpen = true;
+    if (!this.isOpen) {
+      this.open();
+    }
     this.acValue = e.target.value;
     this.filteredList = this.values.filter(value => value.toLowerCase().startsWith(this.acValue.toLowerCase()));
   }
@@ -71,4 +75,47 @@ export class AutocompleteComponent {
     this.selectedValue = true;
     this.close();
   }
+
+  // A vérifier
+
+  selectOption(li: HTMLElement) {
+    this.ariaNull();
+    li.setAttribute('aria-selected', 'true');
+  }
+
+  isOptionInView(li: HTMLElement) {
+    let listPosPage = this.listbox.nativeElement.offsetHeight;
+    let liPosPage = li.offsetTop;
+    let liHeight = li.offsetHeight;
+    let result;
+
+    if (liPosPage + liHeight > listPosPage) {
+      result = true;
+    } else {
+      result = false;
+    }
+    return result;
+  }
+
+  nullActiveDescendant() {
+    this.options.forEach(option => option.nativeElement.setAttribute('aria-activedescendant', null));
+  }
+
+  setActiveDescendant(li: HTMLElement) {
+    const acInput = this.acInput.nativeElement;
+    const listbox = this.listbox.nativeElement;
+
+    if (li && listbox.classList.contains('focus')) {
+      let id = li.getAttribute('id');
+      acInput.setAttribute('aria-activedescendant', id);
+      if (this.isOptionInView(li)) {
+        li.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+      } else {
+        listbox.scrollTo(0, 0);
+      }
+      this.selectOption(li);
+    } else {
+      this.nullActiveDescendant();
+    }
+  }
 }
diff --git a/src/app/pages/autocomplete-page/autocomplete-page.component.html b/src/app/pages/autocomplete-page/autocomplete-page.component.html
@@ -6,7 +6,11 @@ <h3>Autocomplete</h3>
       <c3m-autocomplete label="Label of autocomplete" [values]="values"></c3m-autocomplete>
     </c3m-tab-panel>
     <c3m-tab-panel class="block-style" tabTitle="Application">
-      <pre></pre>
+      <pre>
+&lt;c3m-autocomplete label=&#34;Label of autocomplete [array]=&#34;values&#34;&gt;
+  &lt;NG-CONTENT&gt;
+&lt;/c3m-autocomplete&gt;
+      </pre>
     </c3m-tab-panel>
   </c3m-tabs>
 </section>