Ionic Elastichat - Chat Demo w/ Auto Resizing Textarea

demo
7

@digitalxp It could be possible that you are forgetting to emit the taResize event in the monospaced.elastic directive. Make sure to add this line of code to the directive in the appropriate spot -

scope.$emit('taResize', $ta); // subscribe to this event in your controller

In your controller you will do this every time that occurs -

// I emit this event from the monospaced.elastic directive, read line 480 in the Codepen JS
$scope.$on('taResize', function(e, ta) {
  console.log('taResize');
  if (!ta) return;
  
  var taHeight = ta[0].offsetHeight;
  console.log('taHeight: ' + taHeight);
  
  if (!footerBar) return;
  
  var newFooterHeight = taHeight + 10;
  newFooterHeight = (newFooterHeight > 44) ? newFooterHeight : 44;
  
  footerBar.style.height = newFooterHeight + 'px';
  scroller.style.bottom = newFooterHeight + 'px'; 
});

@pcr You can implement this in your app, I have it working flawless in an app I will be publishing for iOS/Android very soon. I had to add some extra work for iOS because I use the keyboard-attach directive provided by Ionic. You’ll want to be using the ionic-keyboard plugin as well with this setting cordova.plugins.Keyboard.disableScroll(true).

In order to prevent the content from scrolling into the message on iOS you will need to get the keyboard height and add it to the scroller.style.bottom like this below. You’ll also need the keyboardHideHandler logic also.

var keyboardHeight = 0;

window.addEventListener('native.keyboardshow', keyboardShowHandler);
window.addEventListener('native.keyboardhide', keyboardHideHandler);

function keyboardShowHandler(e) {
    console.log('Keyboard height is: ' + e.keyboardHeight);
    keyboardHeight = e.keyboardHeight;
}

function keyboardHideHandler(e) {
    console.log('Goodnight, sweet prince');
    keyboardHeight = 0;
    $timeout(function() {
      scroller.style.bottom = footerBar.clientHeight + 'px'; 
    }, 0);
}


// For iOS you will need to add the keyboardHeight to the scroller.style.bottom
$scope.$on('taResize', function(e, ta) {
  console.log('taResize');
  if (!ta) return;
  
  var taHeight = ta[0].offsetHeight;
  console.log('taHeight: ' + taHeight);
  
  if (!footerBar) return;
  
  var newFooterHeight = taHeight + 10;
  newFooterHeight = (newFooterHeight > 44) ? newFooterHeight : 44;
  
  footerBar.style.height = newFooterHeight + 'px';

  if (device.platform.toLowerCase() === 'ios') {
    scroller.style.bottom = newFooterHeight + keyboardHeight + 'px'; 
  } else {
    scroller.style.bottom = newFooterHeight + 'px'; 
  }
});

I suggest removing the event listeners for the keyboard handlers when your view is left like so -

$scope.$on('$ionicView.leave', function() {
    window.removeEventListener('native.keyboardshow', keyboardShowHandler);
    window.removeEventListener('native.keyboardhide', keyboardHideHandler);
});

@claw Thank you for your addition to my Codepen that prevents the content from scrolling into the message when the textarea gets increased in size. Above is the solution I use for iOS :~)