Pan / Zoom is blocking <input> in foreignObject

[benoitlahoz]

Hello and thank you for this work!

I have an issue on inserting an HTML <input type="text" /> in a foreignObject: the HTML input doesn't take focus.
I guess the plugin listeners are having precedence over the input's one...

Any advice to resolve this?
Thank you.

[Fuzzyma]

Mh, that's a tough one. Ofc the default behavior needs to be prevented so that the browser is not scrolling or zooming.
I don't see a simple solution to that problem right now. You could try and listen to touchstart and touchend on the input yourself and focus it yourself maybe?

[benoitlahoz]

Thank you.
It works!

// Get the foreignElement's input (here the input is wrapped in a <div>)
const input: HTMLInputElement = foreignElement.node.getElementsByTagName('input')[0];

// The listener for 'click outside'
const onClickOutside = (event: MouseEvent) => {
  if (event.target === input) {
     return false;
  }

  // Blur the inner input element.
  input.blur();

  // Remove the listener on window
  window.removeEventListener('mousedown', onClickOutside);
};

// Add listener to mousedown event
input.addEventListener('mousedown', () => {
  input.focus();

  // Add listener to 'click outside' event
  window.addEventListener('mousedown', onClickOutside);
});