IOS device keyboard not opening on single tap event itext insert fabricjs hammerjs with Angular 9

Question

I am using fabricjs for canvas and hammerjs for touch event with Angular 9. I have a single tap event of hammerjs which creates an object of fabric's IText. Single tapping creates the fabric and populates it on the canvas, but the device keyboard does not open to add text in the text object. The fabricjs's IText creates TEXTAREA internally to allow text entering.

Tried with:

1. canvas.getActiveObject().enterEditing(); 
   canvas.getActiveObject().hiddenTextarea.focus();
2. document.querySelector('[data-fabric-hiddentextarea]').setAttribute("autofocus", "");
   document.querySelector('[data-fabric-hiddentextarea]').focus();
   document.querySelector('[data-fabric-hiddentextarea]').click();

Above solutions were tried with settimeout as well.

Please suggest. thanks in advance

Answer 1

Found a way by using VanilaJS touchend event. Had to remove the HammerJS's doubletap event and use touchend event.

let element = document.getElementById('canvasId');
let timedout;
let lastTaped = 0;
element.addEventListener('touchend', (event) => {
    var currentTime = new Date().getTime();
    var tapLength = currentTime - lastTaped;
    clearTimeout(timedout);
    if (tapLength < 500 && tapLength > 0) {
      // code to add the iText object
      event.preventDefault();
    }
    lastTaped = currentTime;
  }
});

thanks :) keep coding