MultiTag in Working! Fixed bugs

example/indexTs.ts

@@ -15,4 +15,5 @@ const dropdn = new CGSelect({
     'Ferari',
   ],
   multiselect: true,
+  multiselectTag: true,
 });

src/cg-selectTS.ts

@@ -1,8 +1,12 @@
+import { ICreateBreadCrumb } from './components/create-element/create-element.interface';
 import {
+  CreateBreadCrumb,
   createNativeSelect,
   createNativeSelectOption,
 } from './components/create-element/create-elementTs';
+
 import { IDataItem, ITextSelect } from './components/utils/urils.interface';
+
 import {
   createSelected,
   getFormatItem,
@@ -10,6 +14,7 @@ import {
   nativeOptionMultiple,
   nativeOptionOrdinary,
 } from './components/utils/utilsTs';
+
 import { ICgSelect } from './interfaces/cg-select.interface';
 import { IItems } from './interfaces/items.interface';
 import './main.scss';
@@ -320,22 +325,50 @@ export class CGSelect implements ICgSelect {
               nativeOptionMultiple(nativeOption, item.title, true);
               select!.textContent = '';
 
-              if (Array.isArray(this.selectedItems)) {
+              if (multiselectTag) {
-                this.selectedItems.push(item.title);
+                if (Array.isArray(this.selectedItems)) {
-                select!.innerText = this.selectedItems.join(',');
+                  const dataBreadCrumb: ICreateBreadCrumb = {
+                    option: this.options,
+                    element: this.element,
+                    indexes: this.indexes,
+                    selectedItems: this.selectedItems,
+                  };
+
+                  this.selectedItems.push(item.title);
+                  select!.appendChild(ulMultipul);
+                  ulMultipul.appendChild(
+                    CreateBreadCrumb(dataBreadCrumb, item.title, index, item.id),
+                  );
+                }
+              } else {
+                if (Array.isArray(this.selectedItems)) {
+                  this.selectedItems.push(item.title);
+                  select!.innerText = this.selectedItems.join(',');
+                }
               }
             } else {
-              this.indexes.splice(checkIndex, 1);
+              if (multiselectTag) {
-              nativeOptionMultiple(nativeOption, item.title, false);
+                const tagItem = document.getElementById(`tag-${index}-${item.id}`);
+                ulMultipul.removeChild<Element>(tagItem!);
+              }
 
               if (Array.isArray(this.selectedItems)) {
                 this.selectedItems.splice(checkIndex, 1);
-                select!.innerText = this.selectedItems.join(',');
+                this.indexes.splice(checkIndex, 1);
+                nativeOptionMultiple(nativeOption, item.title, false);
               }
             }
 
-            if (Array.isArray(this.selectedItems) && !this.selectedItems.length) {
+            if (!this.selectedItems.length) {
               getSelectText(placeholderTextSelect, select);
+            } else {
+              if (multiselectTag) {
+                select!.appendChild(ulMultipul);
+              } else {
+                if (Array.isArray(this.selectedItems)) {
+                  select!.innerText = this.selectedItems.join(',');
+                }
+              }
             }
           }
         } else {
@@ -349,62 +382,6 @@ export class CGSelect implements ICgSelect {
           });
           option.classList.add('active');
         }
-
-        // if (multiselect) {
-        //   this.selectedItems = [];
-        //   option.classList.toggle('active');
-        //   const checkBox: HTMLInputElement | null = option.querySelector('input[type="checkbox"]');
-
-        //   if (checkBox) {
-        //     if (!(event.target instanceof HTMLInputElement)) {
-        //       checkBox.checked = !checkBox.checked;
-        //     }
-
-        //     if (checkIndex === -1) {
-        //       nativeOptionMultiple(nativeOption, item.title, true);
-        //       this.indexes.push(index);
-        //       select!.textContent = '';
-
-        //       if (multiselectTag) {
-        //         this.selectedItems.push(item);
-        //         select!.appendChild(ulMultipul);
-
-        //         const data = {
-        //           option: this.options,
-        //           element: this.element,
-        //           indexes: this.indexes,
-        //           selectedItems: this.selectedItems,
-        //         };
-
-        //         ulMultipul.appendChild(createBreadcrumb(data, item.title, index, item.id));
-        //       } else {
-        //         debugger;
-        //         this.selectedItems.push(item.title);
-        //         console.log(this.selectedItems);
-
-        //         select.innerText = this.selectedItems;
-        //       }
-        //     } else {
-        //       if (multiselectTag) {
-        //         const tagItem = document.getElementById(`tag-${index}-${item.id}`);
-        //         ulMultipul.removeChild(tagItem);
-        //       }
-
-        //       this.indexes.splice(checkIndex, 1);
-        //       this.selectedItems.splice(checkIndex, 1);
-        //       nativeOptionMultiple(nativeOption, item.title, false);
-        //     }
-
-        //     if (!this.#selectedItems.length) {
-        //       getSelectText(dataSelectText, select);
-        //     } else {
-        //       if (multiselectTag) {
-        //         select.appendChild(ulMultipul);
-        //       } else {
-        //         select.innerText = this.#selectedItems;
-        //       }
-        //     }
-        //   }
       });
     });
   }

src/components/create-element/create-element.interface.ts

@@ -1,6 +1,6 @@
 import { ICgSelect } from '../../interfaces/cg-select.interface';
 
-export interface IcreateBreadCrumb {
+export interface ICreateBreadCrumb {
   element: Element | null;
   option: ICgSelect;
   indexes: number[];

src/components/create-element/create-elementTs.ts

@@ -1,4 +1,5 @@
-import { IcreateBreadCrumb } from './create-element.interface';
+import { nativeOptionMultiple } from '../utils/utilsTs';
+import { ICreateBreadCrumb } from './create-element.interface';
 
 /**
  * Метод который создает нативный селект
@@ -25,22 +26,22 @@ export function createNativeSelectOption(): HTMLOptionElement {
 
 /**
  * Метод который создает и отвечает за поведение chips
- * @param {object} data объект в котором содержатся настройки и элементы селекта
+ * @param {ICreateBreadCrumb} data объект в котором содержатся настройки и элементы селекта
  * @param {string} title имя выбранного элемента для отрисовки chips
  * @param {number} index индекс выбранного элемента для отрисовки chips
  * @param {string} id уникальное id выбранного элемента
  * @returns {HTMLElement} возвращает сформированный HTMLElement chips item
  */
-export function createBreadcrumb(
+export function CreateBreadCrumb(
-  data: IcreateBreadCrumb,
+  data: ICreateBreadCrumb,
   title: string,
   index: number,
   id: string,
-) {
+): HTMLLIElement {
   const { element, option, indexes, selectedItems } = data;
   const { placeholder, styles } = option;
 
-  const selected = element!.querySelector('.selected');
+  const selected: HTMLElement | null | undefined = element?.querySelector('.selected');
   const nativeOption = element!.querySelectorAll('.nativeSelect__nativeOption');
 
   const liChip = document.createElement('li');
@@ -69,28 +70,28 @@ export function createBreadcrumb(
   svgIcon.addEventListener('click', (event) => {
     event.preventDefault();
     event.stopPropagation();
-    //   nativeOptionMultiple(nativeOption, title, false);
+    nativeOptionMultiple(nativeOption, title, false);
 
     const deleteIcon = indexes.indexOf(index);
-    let checkBox = '';
+    let checkBox: any;
 
     indexes.splice(deleteIcon, 1);
     selectedItems.splice(deleteIcon, 1);
 
     if (id) {
-      // checkBox = document.getElementById(`chbox-${id}`);
+      checkBox = document.getElementById(`chbox-${id}`);
     } else {
-      // checkBox = document.getElementById(`chbox-${index}`);
+      checkBox = document.getElementById(`chbox-${index}`);
     }
 
-    //   checkBox.checked = false;
+    checkBox.checked = false;
-    //   checkBox.parentElement.classList.remove('active');
+    checkBox.parentElement.classList.remove('active');
 
     if (!selectedItems.length) {
-      //selected?.textContent = placeholder;
+      selected!.innerText = placeholder!;
     }
 
-    //   liChip.parentElement.removeChild(liChip);
+    liChip.parentElement!.removeChild(liChip);
   });
 
   return liChip;