$ionicGesture with textarea: no cursor shown

Hello,
I want to add a swipeleft/swiperight event to a textarea using $ionicGestures. My goal is to have a textarea where a swipe left/right changes the text in it but the user can also edit the text. This works fine in a browser but not on my Android device. On which I cannot type anything but the swiping part works…

My directive looks as follows:

app.directive('swipeMe', ['$ionicGesture', function($ionicGesture) {
return{
  restrict: 'A',
  link: function(scope, elem, attrs) {
    var array = ['Text A', 'Text B', 'Text C'];
    var ind = 0;
    $ionicGesture.on('swipeleft', function(event){text(++ind, event);}, elem);
    $ionicGesture.on('swiperight', function(event){text(--ind, event);}, elem);
    $ionicGesture.on('touch', function(event){elem[0].focus();}, elem);
    function text(ind, event) {
      var i = ind % array.length;
      if (i < 0) {
        i = array.length - Math.abs(i);
      }
      elem.val(array[i]);
    }
  }
}
}]);

and the (trivial) html part

<textarea swipe-me></textarea>

This works fine in a browser (Chrome) but not on my Android device. I can swipe and skim through the items in the array but when clicking the keyboard appears but no blinking cursor. And whatever I type won’t show up anywhere.

I’ve found this link: https://github.com/EightMedia/hammer.js/issues/389
However, the solution doesn’t seem to work or did I implement it wrong?

Hmm you shouldn’t have to use a directive for this. You can use css to fix this.

.item input,
textarea {
  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
}

I’ve used it and I can select text, move the toggles, and start typing again.

2 Likes

Thanks @mhartington. That works like a charme :smile:

1 Like

Issue with swipe right and swipe left enabled https://github.com/ionic-team/ionic-v1/issues/248 @mhartington