Chat input bar with Ionic

Hi everyone,

I’m trying to make a chat view in Ionic (v1.0.0-rc.2) but I have issues regarding the input chat bar.
I’m using a ion-footer-bar with keyboard-attach directive. This footer contains a textarea and a sending button.
I have tried many things but the result is not smooth / not native at all.

As you can see in the following issue I have submited (https://github.com/driftyco/ionic/issues/3537), there is an animation problem but here is another issue.

When I click on the textarea, the keyboard is opening correctly. Then I enter some characters in it and when I click on the “send” button, the keyboard is disappearing.

As WhatsApp, Line, iMessages, etc., I want the keyboard to stay open and prevent it to be closed automatically.

If anybody have found a solution regarding that, I’m looking for help! :wink:

So this can be done using a form element.

I want to post the message with a send button like all messaging app.

The using of the “return” button of keyboard to submit the form is not wanted here. This “return” button is used to make a jump line.

Is there a way with the current version of Ionic ?

Xavier made a good observation about the keyboard animation. It is not smooth or native at all.

Both the ‘keyboard-attach’ directive and the ‘ion-footer-bar’ work well together in static positions. However during keyboard animations, it looks as though the keyboard and the input field travel at two different speeds (keyboard springs up slower than the input field, revealing empty background on the way up, and disappears equally slower than the input field on the way back, partially covering it while disappearing/losing focus).

I am also trying to make a Chat app and would be incredibly eager to know if anybody has found a work-around (CSS? Angular? jQuery?).

EDIT: to answer Xavier’s question on how to get the keyboard to stay open after pressing the ‘send’ button, I made this directive:

 .directive("isFocused", function($timeout) {
    return {
        link: function(scope, element) {
              scope.$watch("isFocused", function (value) {
                $timeout(function () {
                    if (scope.isFocused) {
                          element[0].focus();
                      }
                      element.on("blur", function () {
                          if (scope.isFocused) {
                              element[0].focus();
                        }
                      });
                  });
              });
        }
    };
 });

and in my controller I have:

$scope.isFocused = true;
$scope.contentClick = function () { // triggered by an ngClick placed in <ion-content>
    $scope.isFocused = false;
}
$scope.inputClick = function () { // triggered by an ngClick placed in the <textarea>
    $scope.isFocused = true;
}

Hi there,

Having the same problem with the keyboard hiding when pressing the send button, I’ve tried the fix stated in this topic, however, the keyboard does hide and then reappears, so there is a slide down - slide up animation that is annoying.
I’ve located a blur event being called with ele.blur(); on function tapFocusOutActive from the ionic.bundle.js file at line 3151. If I comment out that line, the blur event does not trigger anymore, the keyboard does not hide … but, a selection cursor appears like in the attached image that flickers between the top of the screen and the input.
So far, I’ve tested on android 6 on a nexus 5 and 5X.
The ionic framework version is v1.2.4-nightly-1917
Can anyone help with this issue?

Thx,
Victor

Hello, can anyone help with this issue?

did you ever solve the animation issue?

No, i’m sorry…

Just the tweak mentionned in the post. But the result is not really what I wanted for an app with a chat…

I have not work on it since few months so maybe…

Have you try with Ionic 2 beta?

Envoyé de mon iPhone

Check my Ionic chat template! :smiley: http://market.ionic.io/plugins/ionic-elastichat-images