iPad TextAreaItem focus loss because of soft keyboard

[reneguillot]

Hi experts,

Using the SmartClient 8.3 Feature Explorer (http://smartclient.com/docs/8.3/a/system/reference/SmartClient_Explorer.html#textAreaItem), I'm trying to set up a TextAreaItem with a hint that shows the remaining number of characters that can be typed in the TextAreaItem.

I'm using the following code for this, with event handlers for keyUp and keyDown to calculate the remaining characters, and to set the hint text:

isc.DynamicForm.create({
  width: 300,
  fields: [
    {  title: "Description",
      type: "textArea",
      length: 200,
      hint: "(200)",
      keyUp:
        function(item, form, keyName)
        {
          var itemValue = item.getValue();
          if (itemValue != null) {
            var remainingChars = 200 - itemValue.length;
            item.setHint('(' + remainingChars + ')');
          }
          else
            item.setHint('(200)');
          return true;
        },
      keyDown:
        function(item, form, keyName)
        {
          var itemValue = item.getValue();
          if (itemValue != null) {
            var remainingChars = 200 - itemValue.length;
            item.setHint('(' + remainingChars + ')');
          }
          else
            item.setHint('(200)');
          return true;
        }
    }
  ]
});

On Windows based browsers like Mozilla Firefox v21.0, Microsoft Internet Explorer 9.0, Google Chrome v27.0 and even Safari v5.1.7 for Windows, the hint is properly updated with every typed character.

However on iPad Safari (iOS v6.1.3), the soft keyboard disappears (scrolls down off the screen) after every typed character. The hint text is updated properly, but it seems that the /item.setHint/ method in the event handlers above is causing the TextAreaItem to lose focus in some strange way. As a result, Safari seems to think that it can scroll the soft keyboard off the screen. Whenever I comment out this specific method, the soft keyboard stays in focus.

Do you have any idea how this issue can be resolved on the iPad Safari, and keep the soft keyboard on the screen?

Many thanks in advance for your valuable input! :)

Kind regards,

Rene Tran-Guillot

[Isomorphic]

At the moment, setHint() causes a fairly large update of the DOM which ends up destroying and re-creating the element that has keyboard focus.

An alternative approach is to show the character count in a second FormItem - a StaticTextItem. Calling setValue() on this will not cause redrawing of the focused element.

[reneguillot]

A Working Resolution :)

Hi,

Thanks for this valuable tip, much appreciated. I now managed to create a solution which now also works on the iPad, with a SmartTextItem to display the remaining character length. The keyboard doesn't scroll down anymore.

For your viewing pleasure, I copied my code below:

isc.DynamicForm.create({
  width: 300,
  fields: [
    { title: "Description",
      type: "textArea",
      length: 200,
      keyUp:
        function(item, form, keyName)
        {
          var itemValue = item.getValue();
          if (itemValue != null) {
            var remainingChars = 200 - itemValue.length;
            commentLength.setValue('(' + remainingChars + ')');
          }
          else
            commentLength.setValue('(200)');
          return true;
        },
      keyDown:
        function(item, form, keyName)
        {
          var itemValue = item.getValue();
          if (itemValue != null) {
            var remainingChars = 200 - itemValue.length;
            commentLength.setValue('(' + remainingChars + ')');
          }
          else
            commentLength.setValue('(200)');
          return true;
        }
    },
    { type: "staticTextItem",
      ID: "commentLength",
      value: "(200)",
      canEdit: false
    }
  ]
});

Kind regards and thanks again.

Rene Tran-Guillot