fix закрытие input с выподающими списками

assets/css/gp-style-core.css

@@ -714,6 +714,9 @@ button{
   background: var(--background-white);
   transition: left .2s ease-out;
 }
+.form-input-two__input:checked + .form-input-two__oval{
+  left: calc(50% - 2px);
+}
 .form-input-two__button{
   width: 50%;
 

assets/js/gp-form.js

@@ -1,9 +1,9 @@
 'use strict';
 
 
-inputPhone('.form-input__phone', '.form-input-phone__icon', '.form-input-phone__code', '.form-input-phone__input', '.form-input-phone__list', '.form-input-phone-list__item', '.form-input-phone-list-item__icon', '.form-input-phone-list-item__code');
+inputPhone('.form-input__phone', '.form-input-phone__icon', '.form-input-phone__code', '.form-input-phone__input', '.form-input-phone__list', 'form-input-phone-list__item', '.form-input-phone-list-item__icon', '.form-input-phone-list-item__code', 'form-input-phone-list__search');
 
-function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon, selectCode) {
+function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon, selectCode, searchInput) {
     let inputs = document.querySelectorAll(main);
 
     inputs.forEach(e => {
@@ -11,12 +11,24 @@ function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon,
             thisMainCode  = e.querySelector(mainCode),
             thisInput  = e.querySelector(input),
             thisList  = e.querySelector(list),
-            thisSelects  = e.querySelectorAll(selects);
+            thisSelects  = e.querySelectorAll(`.${selects}`),
+            thisSearchInput = e.querySelector(`.${searchInput}`);
+
+        thisInput.onblur = function (input) {
+            if (!(input.relatedTarget != null && (input.relatedTarget.classList.contains(searchInput) || input.relatedTarget.classList.contains(selects)))) {
+                thisList.classList.remove('active');                 
+            }
+        }
 
         e.onclick = function (event) {
-            thisInput.focus();
+            if (!event.target.classList.contains(searchInput)) {
+                if (thisList.classList.contains('active')) {
+                    thisList.classList.remove('active');
+                }
 
-            thisList.classList.add('active');            
+                thisInput.focus();
+                thisList.classList.add('active');
+            }
         }
 
         thisSelects.forEach(e => {
@@ -61,35 +73,19 @@ function checkPhone(input) {
     })
 }
 
-inputTwo('.form-input__two', '.form-input-two__button', '.form-input-two__oval', '.form-input-two__input')
+inputTwo('.form-input__two', '.form-input-two__input')
 
-function inputTwo(inputTwo, button, oval, input) {
+function inputTwo(main, inputTwo) {
-    let inputTwos = document.querySelectorAll(inputTwo);
+    let buttons = document.querySelectorAll(main);
 
-    inputTwos.forEach(e => {
+    buttons.forEach(button => {
-        let thisButtons = e.querySelectorAll(button),
+        let input = button.querySelector(inputTwo);
-            thisOval = e.querySelector(oval),
-            thisInput = e.querySelector(input),
-            thisMain = e;
             
-        thisButtons.forEach(button => {
+        button.onclick = function () {
-            button.onclick = function (event) {
+            input.checked = (input.checked == false) ? true : false;
-                event.preventDefault();
+        }
 
-                let newLeft = button.clientWidth;
-                let newValue = button.textContent;
 
-                if (button.classList.contains('alternative')) {
-                    thisMain.classList.add('alternative');
-                    thisInput.value = newValue;
-                    thisOval.style.left = `${newLeft}px`;
-                }else{
-                    thisMain.classList.remove('alternative');
-                    thisInput.value = newValue;
-                    thisOval.style.left = `2px`;
-                }
-            }
-        })
     })
 }
 
@@ -134,6 +130,12 @@ function listInputRadio(main ,item, textClass, input, content, block) {
             thisBlock.style.height = '192px';
         }
 
+
+        thisInput.onblur = function(){
+            thisBlock.classList.remove('active');
+            thisBlock.style.height = '0px';
+        };
+
         items.forEach(item => {
             item.onclick = function (event) {
                 event.preventDefault();
@@ -146,9 +148,6 @@ function listInputRadio(main ,item, textClass, input, content, block) {
                 }
 
                 item.classList.add('active');
-
-                thisBlock.classList.remove('active');
-                thisBlock.style.height = '0px';
             }
         })
     })

notification-form-pet.html

@@ -234,12 +234,11 @@
                     <div class="modal-form-content__line">
                         <label for="" class="label-name">Вид животного</label>
                         <div class="form-input__two">
+                            <input type="radio" class="form-input-two__input">
                             <div class="form-input-two__oval"></div>
 
                             <button class="form-input-two__button">Кошка</button>
-                            <button class="form-input-two__button alternative">Собака</button>
+                            <button class="form-input-two__button ">Собака</button>
-
-                            <input type="text" value="Кошка" class="form-input-two__input">
                         </div>
                     </div>
 
@@ -262,12 +261,12 @@
                     <div class="modal-form-content__line">
                         <label for="" class="label-name">Пол вашего питомца</label>
                         <div class="form-input__two">
+                            <input type="radio" class="form-input-two__input">
                             <div class="form-input-two__oval"></div>
 
                             <button class="form-input-two__button">Мальчик</button>
-                            <button class="form-input-two__button alternative">Девочка</button>
+                            <button class="form-input-two__button ">Девочка</button>
 
-                            <input type="text" value="Кошка" class="form-input-two__input">
                         </div>
                     </div>
 
@@ -378,12 +377,12 @@
                     <div class="modal-form-content__line">
                         <label for="" class="label-name">Возраст питомца</label>
                         <div class="form-input__two">
+                            <input type="radio" class="form-input-two__input">
+
                             <div class="form-input-two__oval"></div>
 
                             <button class="form-input-two__button">Примерный</button>
-                            <button class="form-input-two__button alternative">Точный</button>
+                            <button class="form-input-two__button ">Точный</button>
-
-                            <input type="text" value="Кошка" class="form-input-two__input">
                         </div>
                     </div>