Google Map Custom Overlay with INPUT text not working on IE Edge

Question

When using Google Map Custom Overlay to add pop over with input text boxes as seen below, when I try to click on the input box on IE Edge 15 (Haven't tested on other IE versions) I can't click on it and start typing as if it won't set focus on the input box.

It does works on Chrome though.

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);
  }
}; 

Full example code here - jsfiddle

I am wondering if my implementation above is wrong or this is a bug from Google Map? [Edit: or is there a work around?]

Answer 1

I've forked your fiddle. It might be a bit hacky, but I've updated the click event to focus on the input:

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

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