fix: outside click at sidebar component (#829)

Brisanet · Sep 18, 2023 · e71c893 · e71c893
1 parent 2d5f623
commit e71c893
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 12 deletions.
diff --git a/projects/ion/src/lib/sidebar/sidebar.component.ts b/projects/ion/src/lib/sidebar/sidebar.component.ts
@@ -15,30 +15,28 @@ export class IonSidebarComponent {
   public closed = true;
 
   public checkClikOnPageAccess = (event): void => {
-    this.checkClikOnPage(event);
-  };
-
-  public checkClikOnPage(event): void {
-    const containerElement = [document.querySelector('.ion-sidebar--opened')];
+    const containerElement = document.querySelector('.ion-sidebar--opened');
     const innerElement = event.target;
-    if (containerElement.length && !containerElement.includes(innerElement)) {
+    if (containerElement && !containerElement.contains(innerElement)) {
       const closeButton = document.querySelector(
         '.ion-sidebar--opened .ion-sidebar__header button'
       ) as HTMLElement;
       if (closeButton) {
         closeButton.click();
       }
-      document.removeEventListener('click', this.checkClikOnPage);
     }
-  }
+  };
 
   public toggleVisibility(): void {
     this.closed = !this.closed;
     if (!this.closed) {
       setTimeout(() => {
         document.addEventListener('click', this.checkClikOnPageAccess);
       });
+
+      return;
     }
+    document.removeEventListener('click', this.checkClikOnPageAccess);
   }
 
   public itemSelected(itemIndex: number): void {

diff --git a/projects/ion/src/lib/sidebar/sidebar.spec.ts b/projects/ion/src/lib/sidebar/sidebar.spec.ts
@@ -215,20 +215,21 @@ describe('Sidebar', () => {
     it('should close sidebar after clicking outside it', async () => {
       jest.useFakeTimers();
       const timeDelay = 300;
-      const { detectChanges } = await render(IonSidebarComponent, {
+
+      await render(IonSidebarComponent, {
         declarations: [IonSidebarItemComponent, IonSidebarGroupComponent],
         imports: [CommonModule, IonIconModule, IonButtonModule],
       });
 
       userEvent.click(getByTestId('toggleVisibility').firstElementChild);
+      jest.advanceTimersByTime(timeDelay);
+      expect(getByTestId('sidebar')).toHaveClass('ion-sidebar--opened');
       userEvent.click(
         within(getByTestId('outsideContainer')).getByTestId(
           'ion-sidebar__toggle-visibility'
-        ).firstElementChild
+        )
       );
 
-      jest.advanceTimersByTime(timeDelay);
-      detectChanges();
       expect(getByTestId('sidebar')).not.toHaveClass('ion-sidebar--opened');
     });
   });