fix(select-chips): fixing select-events

src/components/autocomplete/autocomplete.tsx

@@ -379,16 +379,13 @@ export class BdsAutocomplete {
   };
 
   private getTextFromOption = (opt: HTMLBdsSelectOptionElement): string => {
-    if (opt?.status || opt?.bulkOption) {
-      if (this.internalOptions) {
-        const internalOption = this.internalOptions.find((option) => option.value == opt.value);
-        if (internalOption) {
-          return internalOption.label;
-        }
+    if (this.internalOptions) {
+      const internalOption = this.internalOptions.find((option) => option.value == opt?.value);
+      if (internalOption) {
+        return internalOption.label;
       }
-      return opt.querySelector(`#bds-typo-label-${this.value}`).textContent;
     }
-    return opt?.titleText ? opt.titleText : opt?.textContent?.trim() ?? '';
+    return opt?.titleText ? opt.titleText : (opt?.textContent?.trim() ?? '');
   };
 
   private getText = (): string => {

src/components/select-option/readme.md

@@ -75,6 +75,7 @@ Type: `Promise<void>`
  - [bds-pagination](../pagination)
  - [bds-select](../selects/select)
  - [bds-select-chips](../selects/select-chips)
+ - [bds-test-component](../test-component)
 
 ### Depends on
 
@@ -95,6 +96,7 @@ graph TD;
   bds-pagination --> bds-select-option
   bds-select --> bds-select-option
   bds-select-chips --> bds-select-option
+  bds-test-component --> bds-select-option
   style bds-select-option fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

src/components/selects/select-chips/readme.md

@@ -119,6 +119,10 @@ Type: `Promise<void>`
 
 ## Dependencies
 
+### Used by
+
+ - [bds-test-component](../../test-component)
+
 ### Depends on
 
 - [bds-chip-clickable](../../chip-clickable)
@@ -145,6 +149,7 @@ graph TD;
   bds-select-option --> bds-checkbox
   bds-checkbox --> bds-icon
   bds-checkbox --> bds-typo
+  bds-test-component --> bds-select-chips
   style bds-select-chips fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

src/components/selects/select-chips/select-chips.tsx

@@ -238,11 +238,14 @@ export class SelectChips {
   @Watch('internalChips')
   protected internalValueChanged(): void {
     this.handleChangeChipsValue();
-    this.bdsChangeChips.emit({ data: this.internalChips, value: this.selectedOption });
+
     if (this.internalChips.length > 0) {
-      const latestOption = { label: this.getLastChip(), value: this.selectedOption };
-      this.selectedOptions = [...this.selectedOptions, latestOption];
-      this.bdsChange.emit({ data: this.selectedOptions });
+      this.selectedOptions = this.internalChips.map((item, i) => {
+        return {
+          label: item,
+          value: `${i}`,
+        };
+      });
     }
   }
 
@@ -416,6 +419,9 @@ export class SelectChips {
     this.selectedOption = value;
     const text = this.getText(value);
     await this.addChip(text);
+
+    this.bdsChangeChips.emit({ data: this.internalChips, value: this.selectedOption });
+    this.bdsChange.emit({ data: this.selectedOptions });
     this.toggle();
   };
 
@@ -439,16 +445,13 @@ export class SelectChips {
   };
 
   private getTextFromOption = (opt: HTMLBdsSelectOptionElement): string => {
-    if (opt?.status || opt?.bulkOption) {
-      if (this.internalOptions) {
-        const internalOption = this.internalOptions.find((option) => option.value == opt.value);
-        if (internalOption) {
-          return internalOption.label;
-        }
+    if (this.internalOptions) {
+      const internalOption = this.internalOptions.find((option) => option.value == opt?.value);
+      if (internalOption) {
+        return internalOption.label;
       }
-      return opt.querySelector(`#bds-typo-label-${opt.value}`).textContent;
     }
-    return opt?.titleText ? opt.titleText : opt?.textContent?.trim() ?? '';
+    return opt?.titleText ? opt.titleText : (opt?.textContent?.trim() ?? '');
   };
 
   private setFocusWrapper = (): void => {
@@ -506,6 +509,8 @@ export class SelectChips {
           this.handleDelimiters();
           this.setChip(this.value);
           this.value = '';
+          this.bdsChangeChips.emit({ data: this.internalChips, value: this.selectedOption });
+          this.bdsChange.emit({ data: this.selectedOptions });
         }
         if (!this.disabled) {
           this.isOpen = true;

src/components/selects/select/select.tsx

@@ -144,7 +144,7 @@ export class Select {
       option.selected = this.value === option.value;
     }
 
-    this.text = this.getText();
+    this.text = this.getText(this.value);
   }
 
   @Listen('mousedown', { target: 'window', passive: true, capture: true })
@@ -210,7 +210,7 @@ export class Select {
       option.selected = this.value === option.value;
       option.addEventListener('optionSelected', this.handler);
     }
-    this.text = this.getText();
+    this.text = this.getText(this.value);
   }
 
   private updateOptions() {
@@ -272,18 +272,15 @@ export class Select {
     }
   };
 
-  private getText = (): string => {
-    const opt = this.childOptions.find((option) => option.value == this.value);
-    if (opt?.status || opt?.bulkOption) {
-      if (this.internalOptions) {
-        const internalOption = this.internalOptions.find((option) => option.value == opt.value);
-        if (internalOption) {
-          return internalOption.titleText ? internalOption.titleText : internalOption.label;
-        }
+  private getText = (value): string => {
+    const opt = this.childOptions.find((option) => option.value == value);
+    if (this.internalOptions) {
+      const internalOption = this.internalOptions.find((option) => option.value == opt?.value);
+      if (internalOption) {
+        return internalOption.titleText ? internalOption.titleText : internalOption.label;
       }
-      return opt.querySelector(`#bds-typo-label-${this.value}`).textContent;
     }
-    return opt?.titleText ? opt.titleText : opt?.textContent?.trim() ?? '';
+    return opt?.titleText ? opt?.titleText : (opt?.innerHTML?.trim() ?? '');
   };
 
   private handler = (event: CustomEvent): void => {

src/components/test-component/readme.md

@@ -13,6 +13,8 @@
 - [bds-typo](../typo)
 - [bds-theme-provider](../theme-provider)
 - [bds-paper](../paper)
+- [bds-select-chips](../selects/select-chips)
+- [bds-select-option](../select-option)
 
 ### Graph
 ```mermaid
@@ -21,6 +23,23 @@ graph TD;
   bds-test-component --> bds-typo
   bds-test-component --> bds-theme-provider
   bds-test-component --> bds-paper
+  bds-test-component --> bds-select-chips
+  bds-test-component --> bds-select-option
+  bds-select-chips --> bds-chip-clickable
+  bds-select-chips --> bds-tooltip
+  bds-select-chips --> bds-icon
+  bds-select-chips --> bds-typo
+  bds-select-chips --> bds-select-option
+  bds-chip-clickable --> bds-icon
+  bds-chip-clickable --> bds-avatar
+  bds-chip-clickable --> bds-typo
+  bds-avatar --> bds-typo
+  bds-avatar --> bds-icon
+  bds-tooltip --> bds-typo
+  bds-select-option --> bds-typo
+  bds-select-option --> bds-checkbox
+  bds-checkbox --> bds-icon
+  bds-checkbox --> bds-typo
   style bds-test-component fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

src/components/test-component/test-component.tsx

@@ -6,6 +6,14 @@ import { Component, h } from '@stencil/core';
 })
 export class TestComponent {
   render() {
+    const DATA = [
+      { value: '1', label: 'Millie Bobby', status: 'offline' },
+      { value: '2', label: 'Finn Wolfhard', status: 'offline' },
+      { value: '3', label: 'David Harbour', status: 'offline' },
+      { value: '4', label: 'Gaten Matarazzo', status: 'offline' },
+      { value: '5', label: 'Caleb McLaughlin', status: 'offline' },
+      { value: '6', label: 'Noah Schnapp', status: 'offline' },
+    ];
     return (
       <bds-grid xxs="12" padding="x-2" flex-wrap="wrap">
         <bds-grid xxs="12" margin="t-2">
@@ -18,14 +26,43 @@ export class TestComponent {
         <bds-grid xxs="6" padding="r-1">
           <bds-theme-provider theme="light">
             <bds-paper elevation="none" border>
-              <bds-grid padding="2">{/* Inserir Componente aqui! */}</bds-grid>
+              <bds-grid direction="column" padding="2">
+                <bds-select-chips
+                  chips='["Millie Bobby", "Finn Wolfhard"]'
+                  onBdsChange={(ev) => console.log('ev - select-chips', ev)}
+                >
+                  <bds-select-option value="1" status="offline">
+                    Millie Bobby
+                  </bds-select-option>
+                  <bds-select-option value="2" status="offline">
+                    Finn Wolfhard
+                  </bds-select-option>
+                  <bds-select-option value="3" status="offline">
+                    David Harbour
+                  </bds-select-option>
+                  <bds-select-option value="4" status="offline">
+                    Gaten Matarazzo
+                  </bds-select-option>
+                  <bds-select-option value="5" status="offline">
+                    Caleb McLaughlin
+                  </bds-select-option>
+                  <bds-select-option value="6" status="offline">
+                    Noah Schnapp
+                  </bds-select-option>
+                </bds-select-chips>
+              </bds-grid>
             </bds-paper>
           </bds-theme-provider>
         </bds-grid>
         <bds-grid xxs="6" padding="l-1">
           <bds-theme-provider theme="dark">
             <bds-paper elevation="none" border>
-              <bds-grid padding="2">{/* Inserir Componente aqui! */}</bds-grid>
+              <bds-grid padding="2" direction="column">
+                <bds-select-chips
+                  options={DATA}
+                  onBdsChange={(ev) => console.log('ev - select-chips', ev)}
+                ></bds-select-chips>
+              </bds-grid>
             </bds-paper>
           </bds-theme-provider>
         </bds-grid>