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.
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!
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;
}
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?
