diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index c0fd746..2f7ebf8 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -2,6 +2,7 @@ import { createSelected, customStyles, getFormatItem, + getSelectText, customStylesFormat, nativOptionMultiple, nativOptionOrdinary, @@ -229,6 +230,7 @@ export class DropDown { * @method buttonControl */ buttonControl(button, method) { + this.btn = button; button.addEventListener('click', () => { if (method === 'open') { this.#open(true); @@ -570,6 +572,10 @@ export class DropDown { #addOptionsBehaviour() { const { multiselect, placeholder, selected, multiselectTag, searchMode, closeOnSelect } = this.#options; + const dataSelectText = { + placeholder: placeholder, + selected: selected, + }; const options = this.#element.querySelectorAll('.list__item'); const select = this.#element.querySelector('.selected'); @@ -595,6 +601,8 @@ export class DropDown { event.preventDefault(); } + const checkIndex = this.#indexes.indexOf(index); + if (multiselect && multiselect == true) { option.classList.toggle('active'); const checkBox = option.querySelector('input[type="checkbox"]'); @@ -604,13 +612,9 @@ export class DropDown { checkBox.checked = !checkBox.checked; } - const checkIndex = this.#indexes.indexOf(index); - if (checkIndex === -1) { nativOptionMultiple(nativOption, item.title, true); - this.#indexes.push(index); - select.innerText = ''; if (multiselectTag && multiselectTag == true) { @@ -640,13 +644,7 @@ export class DropDown { } if (!this.#selectedItems.length) { - if (placeholder) { - select.innerText = placeholder; - } else if (selected) { - select.innerText = selected; - } else { - select.innerText = 'Select...'; - } + getSelectText(dataSelectText, select); } else { if (multiselectTag && multiselectTag == true) { select.appendChild(ulMultipul); @@ -746,7 +744,11 @@ export class DropDown { document.addEventListener('click', (e) => { const withinBoundaries = e.composedPath().includes(dropdown); if (!withinBoundaries) { - this.#close(); + if (this.btn) { + return; + } else { + this.#close(); + } } }); } diff --git a/src/components/utils.js b/src/components/utils.js index c630730..ed0e5f4 100644 --- a/src/components/utils.js +++ b/src/components/utils.js @@ -83,6 +83,25 @@ export function checkItemStruct(item) { return item.hasOwnProperty('id') && item.hasOwnProperty('title') && item.hasOwnProperty('value'); } +/** + * Вставка изначального текста селекта(до выбора) + * @param {object} data объект в котором находяться title селекта + * @param {HTMLElement} select елемент селекта, куда будет вставляться title + * @returns {HTMLElement} возвращает сформированный елемент селекта + */ +export function getSelectText(data, select) { + const { placeholder, selected } = data; + + if (placeholder) { + select.innerText = placeholder; + } else if (selected) { + select.innerText = selected; + } else { + select.innerText = 'Select...'; + } + return select; +} + /** * Преобразование каждого елемента полученного из поля Items; * @param {object | string} dataItem полученный елемент переданный при создании селекта может быть как object/string