SVGPanZoom interfering with dynamic foreignObject content

Question

I want option on my svg map that users are possible to write some simple text. I menage to do that using foreignObject and input type text.

<img id ="text" src="slike/crtanje/text.svg" onclick="writeText()">


function writeText() {    
var draw = karta.select("#wrap")
            .on("mousedown", mousedown)
            .on("mouseup", mouseup);                

  function mousedown() {
     var m = d3.mouse(this);

      draw.append("foreignObject")
        .attr("xhtml", "http://www.w3.org/2000/svg")
        .attr("x", m[0])
        .attr("y", m[1])
        .attr("width", "200")
        .attr("height", "100")
        .attr("class", "forin")
        .append("xhtml:input")
        .attr("xmlns", "http://www.w3.org/1999/xhtml")
        .attr("type", "text" )
        .attr("id", "text");  
           }

  function mouseup () {
       draw.on("mousedown", null);
          }            
} 

The problem is when I include SVGPanZoom library for basic zoom/pan map functionalities (https://github.com/ariutta/svg-pan-zoom), it's not working. I am new to svg and I would appreciate any suggestion. I also tried with contenteditable = "true" but again I face the same problem with the library.

svg.addEventListener("load", function(){
  htmlSVG = document.getElementById("hrzup").contentDocument;
  svgd3 = d3.select(htmlSVG);
  karta = svgd3.select("#karta");

$(document).ready(function () {
  panZoom = svgPanZoom("#hrzup", {
  controlIconsEnabled: true,
  contain: true,
  fit: 1,
  center: 1,
  dblClickZoomEnabled: false,
  minZoom: 0.1,
  panEnabled: true,
  })
});

}, false);