refactor: fixing style error occurring in certain chip flows #926 (#939)

* refactor: fixing style error occurring in certain chip flows #926 * fix: click on chip issues * fix: opening dropdown in a regular required chip group --------- Co-authored-by: allan-chagas-brisa <[email protected]>
Brisanet · Nov 17, 2023 · 5fb388d · 5fb388d
1 parent 9131f4b
commit 5fb388d
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 0 deletions.
diff --git a/projects/ion/src/lib/chip-group/chip-group.component.html b/projects/ion/src/lib/chip-group/chip-group.component.html
@@ -6,6 +6,7 @@
     [disabled]="chip.disabled || disabled"
     [selected]="chip.selected"
     [showDropdown]="chip.selected && chip.options"
+    [showToggle]="chip.options"
     [size]="chip.size || size"
     [options]="chip.options"
     [icon]="chip.icon"
@@ -14,6 +15,7 @@
     [iconPosition]="chip.iconPosition || iconPosition"
     [rightBadge]="chip.rightBadge || rightBadge"
     (click)="selectChip(chip)"
+    (events)="chipEvents($event)"
     (dropdownEvents)="dropdownEvents($event)"
     [attr.data-testid]="'chip-group-' + chip.label"
     [chipGroup]="true"

diff --git a/projects/ion/src/lib/chip-group/chip-group.component.spec.ts b/projects/ion/src/lib/chip-group/chip-group.component.spec.ts
@@ -130,6 +130,7 @@ describe('With Dropdown', () => {
   it('should selected an item when chip has dropdown', async () => {
     await sut();
     const option = mockChips[1].options[0].label;
+    fireEvent.click(screen.getByText(mockChips[1].label));
     fireEvent.click(screen.getByText(option));
     expect(screen.queryAllByText(option)).toHaveLength(1);
   });
@@ -152,4 +153,23 @@ describe('With Dropdown', () => {
     fireEvent.click(screen.getByText('item 1'));
     expect(screen.getByTestId('ion-dropdown')).toBeInTheDocument();
   });
+
+  it('should reset chip style when clicked outside dropdown', async () => {
+    await sut({
+      chips: [
+        {
+          label: 'Chip 1',
+          selected: false,
+          options: [{ label: 'item 1' }, { label: 'item 2' }],
+          multiple: true,
+        },
+      ],
+      selected: {
+        emit: selectEvent,
+      } as SafeAny,
+    });
+    fireEvent.click(screen.getByText('Chip 1'));
+    fireEvent.click(document.body);
+    expect(screen.getByText('Chip 1')).not.toHaveClass('chip-selected');
+  });
 });
diff --git a/projects/ion/src/lib/chip-group/chip-group.component.ts b/projects/ion/src/lib/chip-group/chip-group.component.ts
@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import {
+  ChipEvent,
   ChipSize,
   IconDirection,
   IonChipProps,
@@ -65,6 +66,12 @@ export class IonChipGroupComponent {
     }
   }
 
+  chipEvents(event: ChipEvent): void {
+    if (event.closeDropdown) {
+      this.clearChips();
+    }
+  }
+
   dropdownEvents(options: DropdownItem[]): void {
     if (options) {
       this.dropdown.emit(options);

diff --git a/projects/ion/src/lib/chip/chip.component.spec.ts b/projects/ion/src/lib/chip/chip.component.spec.ts
@@ -253,6 +253,7 @@ describe('Check update label', () => {
 
 describe('With Multiple Dropdown', () => {
   const dropdownEvent = jest.fn();
+  const events = jest.fn();
   const options = [
     {
       label: 'Meteora',
@@ -273,6 +274,9 @@ describe('With Multiple Dropdown', () => {
       dropdownEvents: {
         emit: dropdownEvent,
       } as SafeAny,
+      events: {
+        emit: events,
+      } as SafeAny,
     });
   });
 
@@ -313,6 +317,22 @@ describe('With Multiple Dropdown', () => {
     expect(dropdownEvent).toBeCalledWith([]);
   });
 
+  it('should reset chip style when dropdown is closed', async () => {
+    fireEvent.click(screen.getByText('dropdown'));
+    fireEvent.click(document.body);
+    expect(screen.getByText('dropdown')).not.toHaveClass('chip-selected');
+  });
+
+  it('should emit event when dropdown is closed', async () => {
+    fireEvent.click(screen.getByText('dropdown'));
+    fireEvent.click(document.body);
+    expect(events).toBeCalledWith({
+      selected: false,
+      disabled: false,
+      closeDropdown: true,
+    });
+  });
+
   afterEach(() => {
     dropdownEvent.mockClear();
   });

diff --git a/projects/ion/src/lib/chip/chip.component.ts b/projects/ion/src/lib/chip/chip.component.ts
@@ -21,6 +21,7 @@ export type IconDirection = 'right' | 'left';
 interface ChipEvent {
   selected: boolean;
   disabled: boolean;
+  closeDropdown?: boolean;
 }
 export interface IonChipProps {
   label: string;
@@ -207,6 +208,13 @@ export class ChipComponent implements OnInit, AfterViewInit, DoCheck {
   closeDropdown(): void {
     if (this.showDropdown) {
       this.showDropdown = false;
+      this.selected = false;
+
+      this.events.emit({
+        selected: this.selected,
+        disabled: this.disabled,
+        closeDropdown: true,
+      });
     }
   }
 

diff --git a/projects/ion/src/lib/core/types/chip.ts b/projects/ion/src/lib/core/types/chip.ts
@@ -18,6 +18,7 @@ export type ChipSize = 'sm' | 'md';
 export interface ChipEvent {
   selected: boolean;
   disabled: boolean;
+  closeDropdown?: boolean;
 }
 
 export interface IonChipProps {