[PRAC/cont] Add log/correct "z-index" for drop-btn

Organiz "z-index" correct for drop-btn, when "focus" (overlap row-inpt).

Worth noting:
  - that CSS couldn't do it.

core: B-3 / JS-BL

Author: matowdev

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/js/index.js

@@ -1334,6 +1334,9 @@
       deleteModalRowContacts(context);
     });
 
+    // корректировка z-index у/для drop-btn кнопки
+    handleDropDownZIndex(modalWrap);
+
     // очистка массива после закрытия модального окна
     modalWrap.addEventListener('hidden.bs.modal', () => {
       modalContactsArr = [];
@@ -1574,6 +1577,9 @@
       modalContactElement.style.opacity = '1';
     }, 10);
 
+    // корректировка z-index у/для drop-btn кнопки
+    handleDropDownZIndex(modalWrap);
+
     // скрытие/сразу li/варианта, как "Телефон" (т.к. в drop-btn отображение по умолчанию)
     if (modalContactDropBtn.textContent === 'Телефон') {
       modalContactItemPhone.style.display = 'none';
@@ -1789,6 +1795,23 @@
     modalContactInput.focus(); // перевод фокуса на соседний инпут (после выбора в выпадающем списке)
   }
 
+  // ** корректировка z-index у/для drop-btn из строки контакта (при "focus" перекрытие соседнего row-contact инпута)
+  function handleDropDownZIndex(modalWrap) {
+    const dropDownButtons = modalWrap.querySelectorAll(
+      '.modal__body-add-contact-drop-btn'
+    );
+
+    dropDownButtons.forEach((button) => {
+      button.addEventListener('focus', () => {
+        button.style.zIndex = '5'; // увеличение z-index при "focus"
+      });
+
+      button.addEventListener('blur', () => {
+        button.style.zIndex = '3'; // возврат z-index к default значению
+      });
+    });
+  }
+
   // ** обновление атрибута/значения "type" у/для модального row-contact инпута (кому возможно, после выбора)
   function updateRowInputType(modalContactInput, contactType) {
     // объект для сопоставления (кому заменять, на какое значение)