iOS keyboard showing automatically (input in footer)

ionic-v1
1

I am building a typical whats-app like chat component for my app. Currently the input field is in the ion-footer-bar directive. On Android, this works flawlessly. However, on iOS, this setup causes the keyboard to automatically appear when the page is loaded. Is there anyway to disable the keyboard from automatically loading, and instead only load on input text focus?

Right now, I am running cordova.plugins.Keyboard.close(); after a 50ms delay, but it doesn’t always work and you still see the keyboard appearing, then closing.

The behavior seems random. Sometimes the keyboard automatically loads on iOS. Sometimes it doesn’t. And sometimes this blank chunk of space does instead:

image
image.png640×960 28.7 KB

image

2

I realized the blank space was because the keyboard was loaded, and I called cordova.plugins.Keyboard.close(), before the view had a chance to respond properly.

Still underlying problem, that if I have an <input> or <textarea> in the footer, on iOS, the keyboard is automatically triggered on view load.

3

do you have autofocus on the input or textarea? the focus event is what causes the keyboard to show

4

@djett, Nope no autofocus, here is the code.

<textarea class="chat_text" ng-model="input_chat" value="" placeholder="Send a message..." required minlength="1" maxlength="1500"></textarea>

When the same code is in the <ion-content>, there’s no problem (keyboard doesn’t show up). Only when it’s in the footer.

5

@mhartington I think I found the issue. If the <textarea> has a label with the class item-input-wrapper, and this is all in the footer, then the keyboard is automatically shown on view load. Specifically, the issue is the following CSS in that classs:

 -webkit-box-flex: 1;
  -webkit-flex: 1 0;
  -moz-box-flex: 1;
  -moz-flex: 1 0;
  -ms-flex: 1 0;
  flex: 1 0;

If that CSS is removed, then the problem seems to go away. This is the CSS that fills the input element to fill the entire width.

Here is the original HTML I was referring too:

<label class="item-input-wrapper">
  <textarea class="chat_text" ng-model="input_chat" value="" placeholder="Send a message..." ></textarea>
</label>

Any thoughts on why? I tried to expand the textarea using width:100% instead of the flexbox code, but that also leads to the same issue.

1 Like
6

Even I’m facing the same problem.

7

I am also facing the same problem and it’s really annoying, can anyone please help @praxis