feat(multiselect): merge com as coisas do Joao e Jorge

po-ui · Oct 26, 2023 · 1494d91 · 1494d91
2 parents 4ab8a0e + 4756a71
commit 1494d91
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 57 deletions.
diff --git a/projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect.component.html b/projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect.component.html
@@ -6,8 +6,12 @@
   [p-required]="required"
   [p-show-required]="showRequired"
 >
-  {{ initializedOnKeyDown }}
-  <div class="po-field-container-content" [class.po-multiselect-show]="dropdownOpen">
+  <div
+    cdkOverlayOrigin
+    #trigger="cdkOverlayOrigin"
+    class="po-field-container-content"
+    [class.po-multiselect-show]="dropdownOpen"
+  >
     <div
       #inputElement
       [tabindex]="disabled ? -1 : 0"
@@ -27,7 +31,6 @@
       </span>
 
       <po-tag
-        #poTag
         *ngFor="let disclaimer of visibleDisclaimers"
         [p-value]="disclaimer[fieldLabel]"
         [p-removable]="true"
@@ -64,6 +67,7 @@
     (p-change)="changeItems($event)"
     (p-change-search)="changeSearch($event)"
     (p-close-dropdown)="controlDropdownVisibility(false)"
+    (keydown)="onKeyDownDropdown($event, 0)"
   >
   </po-multiselect-dropdown>
 

diff --git a/projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect.component.ts b/projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect.component.ts
@@ -137,28 +137,14 @@ export class PoMultiselectComponent
       this.focus();
     }
     this.initialized = true;
+  }
 
-    setTimeout(() => {
-      const tagRemoveElements = this.el.nativeElement.querySelectorAll('.po-tag-remove');
-      console.log(tagRemoveElements);
-      tagRemoveElements.forEach((tagRemoveElement, index) => {
-        console.log(tagRemoveElement);
-        this.renderer.setProperty(tagRemoveElement, 'tabindex', 0);
-
-        this.renderer.listen(tagRemoveElement, 'keydown', event => {
-          this.initializedOnKeyDown = true;
-          if (event.key === 'ArrowLeft') {
-            if (index > 0) {
-              tagRemoveElements[index - 1].focus();
-            }
-          } else if (event.key === 'ArrowRight') {
-            if (index < tagRemoveElements.length - 1) {
-              tagRemoveElements[index + 1].focus();
-            }
-          }
-        });
-      });
-    }, 0);
+  onKeyDownDropdown(event: KeyboardEvent, index: number) {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      this.controlDropdownVisibility(false);
+      this.inputElement.nativeElement.focus();
+    }
   }
 
   ngOnChanges(changes: SimpleChanges) {
@@ -295,17 +281,6 @@ export class PoMultiselectComponent
   }
 
   onKeyDown(event?: any) {
-    // if (event.keyCode === PoKeyCodeEnum.left || event.keyCode === PoKeyCodeEnum.right) {
-    //   const disclaimers = this.el.nativeElement.querySelectorAll('po-disclaimer');
-    //   disclaimers.forEach((disclaimer, index) => {
-    //     const spanElement = disclaimer.querySelector(':scope .po-disclaimer-remove');
-    //     if (spanElement) {
-    //       this.addKeyListener(spanElement, disclaimers, index, event);
-    //     }
-    //   });
-    //   return;
-    // }
-
     if (
       (event.keyCode === PoKeyCodeEnum.tab && this.visibleDisclaimers.length > 1) ||
       (event.keyCode === PoKeyCodeEnum.tab && this.visibleDisclaimers.length < 1)
@@ -344,24 +319,6 @@ export class PoMultiselectComponent
     }
   }
 
-  private focusPreviousDisclaimer(disclaimers: any, index: number) {
-    const prevDisclaimer = disclaimers[index - 1];
-    if (prevDisclaimer) {
-      prevDisclaimer.querySelector('.po-disclaimer-remove')?.focus();
-    }
-  }
-
-  private focusNextDisclaimer(disclaimers: any, index: number) {
-    if (index === disclaimers.length - 1) {
-      this.inputElement.nativeElement.focus();
-    } else {
-      const nextDisclaimer = disclaimers[index + 1];
-      if (nextDisclaimer) {
-        nextDisclaimer.querySelector('.po-disclaimer-remove')?.focus();
-      }
-    }
-  }
-
   toggleDropdownVisibility() {
     if (this.disabled) {
       return;
@@ -414,12 +371,8 @@ export class PoMultiselectComponent
   }
 
   closeDisclaimer(value) {
-    console.log(value);
-    console.log(this.selectedOptions);
-    console.log(this.visibleDisclaimers);
     // criar funcao que se value estiver vazio remover de visubleOptionsDropdown todos os que nao estao em visibleDisclaimers
     if (!value) {
-      console.log('veio vazio');
       for (let option of this.visibleDisclaimers) {
         if (!this.selectedOptions.includes(option)) {
           this.selectedOptions.splice(this.selectedOptions.indexOf(option), 1);
@@ -459,6 +412,20 @@ export class PoMultiselectComponent
     );
   }
 
+  private focusItem() {
+    this.dropdown.listbox.listboxItemList.nativeElement.focus();
+    setTimeout(() => {
+      let item;
+      if (this.selectedOptions) {
+        item = document.querySelector('.po-listbox-item[aria-selected="true"]');
+      } else {
+        item = document.querySelectorAll('.po-listbox-item')[0] as HTMLElement;
+      }
+      this.dropdown.listbox.listboxItemList.nativeElement.focus();
+      item?.focus();
+    });
+  }
+
   private applyFilterInFirstClick() {
     if (this.isFirstFilter) {
       this.isServerSearching = true;