Пользовательское наложение Google Map с текстом INPUT не работает в IE Edge

Question

При использовании Google Map Custom Overlay для добавления всплывающих окон с текстовыми полями ввода, как показано ниже, когда я пытаюсь щелкнуть поле ввода в IE Edge 15 (не проверялось в других версиях IE), я не могу щелкнуть по нему и начать печатая так, как будто он не будет фокусироваться на поле ввода.

Это работает на Chrome, хотя.

CustomMarker.prototype.onAdd = function() {
  var self = this;
  var div = this.div;
  if (!div) {
    // Generate marker html
    div = this.div = document.createElement('div');
    div.className = 'custom-marker';
    div.style.position = 'absolute';
    div.innerHTML = '<span><input type="text" value="asfd" style="padding:10px;font-size:18px;" /></span>';
    var innerDiv = document.createElement('div');
    innerDiv.className = 'custom-marker-inner';

    div.appendChild(innerDiv);

    if (typeof(self.args.marker_id) !== 'undefined') {
      div.dataset.marker_id = self.args.marker_id;
    }

    google.maps.event.addDomListener(div, "click", function(event) {
      google.maps.event.trigger(self, "click");
    });

    var panes = this.getPanes();
    panes.overlayImage.appendChild(div);
  }
}; 

Полный пример кода здесь - jsfiddle

Мне интересно, если моя реализация выше неверна или это ошибка с Google Map? [Редактировать: или есть обход?]

Answer 1

Я раздвоил твою скрипку. Это может быть немного странно, но я обновил событие click, чтобы сосредоточиться на вводе:

google.maps.event.addDomListener(div, "click", function(event) {
    google.maps.event.trigger(self, "click");
    event.target.focus();
});

https://jsfiddle.net/ng4hxqfs/5/