Привет всем! Вот кусочек кода: при наведении мыши на кнопку "Вход" появляется форма с автофокусом на первом поле. Проблема такая: если несколько раз ввести в это поле какое-либо значение, заканчивая ввод кнопкой "Войти" самой формы, то при последующих тыках в само поле в автофокусе выпадает autocomplet-ный datalist с введёнными ранее значениями. Так вот, при попытке выбрать какое-либо значение в этом datalist с помощью мыши, как только под мышью оказывается участок этого datalist, исчезает сразу же вся эта форма! Т.е. выбрать ранее введёное значение можно только с помощью стрелок клавиатуры. И второй вопрос, если в открытой уже форме переставить курсор в нижнее поле, то как только мышь уводится за пределы этого поля, но находится в любом месте формы, автоматически фокус перетекает в первое поле, хотя его даже не кликаешь. Помогите, пожалуйста, исправить эти проблемы. Решение нужно на чистом JS, без JQuery. Спасибо!
На всякий случай код в "песочнице":
https://thimbleprojects.org/alessio18911/297272/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="enter-btn-container">
<div class="enter">Вход
<form class="form" name="form" action="#" method="get">
<input class="input" type="text" name="login">
<input class="input" type="password" name="login">
<button type="submit">Войти</button>
</form>
</div>
</div>
</body>
</html>
var enterBtn = document.querySelector(".enter-btn-container"),
enterForm = enterBtn.querySelector(".form"),
enterField = enterForm.querySelector(".input");
enterBtn.addEventListener("mouseover", function(){
enterForm.classList.add("form-show");
enterField.focus();
});
enterForm.addEventListener("mouseout", function(){
enterForm.classList.remove("form-show");
});
body {
font-family: "Arial", sans-serif;
padding: 5px 25px;
font-size: 24px;
margin: 0;
}
.enter-btn-container {
width: 100px;
padding: 10px 0;
}
.enter {
position: relative;
box-sizing: border-box;
padding: 5px 15px;
text-align: center;
color: white;
background-color: green;
border-radius: 20px;
cursor: pointer;
}
.form {
box-sizing: border-box;
display: none;
flex-direction: column;
/*justify-content: space-between;*/
position: absolute;
top: 43px;
left: 0;
width: 250px;
min-height: 130px;
padding: 20px;
border-radius: 8px;
background-color: gainsboro;
}
input {
margin-bottom: 20px;
padding: 10px 15px;
font-size: 16px;
border: 1px solid violet;
border-radius: 5px;
}
button {
align-self: flex-end;
max-width: 90px;
padding: 10px 15px;
color: white;
font-size: 18px;
background-color: blueviolet;
border: none;
border-radius: 30px;
cursor: pointer;
}
.form-show {
display: flex;
}
