Текстовый курсор из поля ввода остается видимым, когда находится позади выпадающего меню в IE

Question

В Internet Explorer 11 мигающий текстовый курсор внутри поля ввода, содержащего некоторый набранный текст, остается видимым, когда раскрывающееся меню переключается над полем ввода.Я ожидаю, что курсор будет скрыт, когда он находится за меню, как в Chrome / Firefox / Safari.

Я обнаружил эту проблему, когда вводил произвольный текст в поле ввода, а затем (не щелкая из поля ввода)наведите курсор на раскрывающуюся кнопку, чтобы открыть раскрывающееся меню в поле ввода.Я попытался настроить z-индекс поля ввода, но не смог заставить этот курсор исчезнуть.

Как заставить этот курсор оставаться скрытым для IE11?

Снимок экрана:

Отрывок:

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
<br>
<hr>
<br>
<form action="/action_page.php">
  First name: <input type="text" name="FirstName"><br>
  <input type="submit" value="Submit">
</form>

Answer 1

Судя по всему, курсор закрашивается поверх поверхности окна в IE. Все, что вы можете сделать, это вызвать blur() на активном элементе на mouseenter на .dropbtn:

document.querySelector('.dropbtn').addEventListener('mouseenter', function(){
  document.activeElement.blur();
})

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
<br>
<hr>
<br>
<form action="/action_page.php">
  First name: <input type="text" name="FirstName"><br>
  <input type="submit" value="Submit">
</form>