fix(osk): fix onscreen keyboard not rendering fully

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glokon/guacamole-common-js",
-  "version": "1.5.21",
+  "version": "1.5.22",
   "description": "Guacamole common js with typescript type definitions",
   "type": "module",
   "main": "lib/cjs/guacamole.js",

src/OnScreenKeyboard.js

@@ -71,7 +71,7 @@ Guacamole.OnScreenKeyboard = function(layout) {
 
     /**
      * Adds a CSS class to an element.
-     * 
+     *
      * @private
      * @function
      * @param {!Element} element
@@ -94,7 +94,7 @@ Guacamole.OnScreenKeyboard = function(layout) {
 
     /**
      * Removes a CSS class from an element.
-     * 
+     *
      * @private
      * @function
      * @param {!Element} element
@@ -120,7 +120,7 @@ Guacamole.OnScreenKeyboard = function(layout) {
 
                     // Otherwise, allow
                     return match;
-                    
+
                 }
             );
         }
@@ -164,7 +164,7 @@ Guacamole.OnScreenKeyboard = function(layout) {
      * @param {!number} height
      *     The height of the element, in arbitrary units, relative to other
      *     ScaledElements.
-     *     
+     *
      * @param {boolean} [scaleFont=false]
      *     Whether the line height and font size should be scaled as well.
      */
@@ -185,7 +185,7 @@ Guacamole.OnScreenKeyboard = function(layout) {
          * @type {!number}
          */
          this.height = height;
- 
+
         /**
          * Resizes the associated element, updating its dimensions according to
          * the given pixels per unit.
@@ -308,10 +308,10 @@ Guacamole.OnScreenKeyboard = function(layout) {
 
                 // Activate modifier if not pressed
                 if (originalKeysym === undefined) {
-                    
+
                     addClass(keyboard, modifierClass);
                     modifierKeysyms[key.modifier] = key.keysym;
-                    
+
                     // Send key event only if keysym is meaningful
                     if (key.keysym && osk.onkeydown)
                         osk.onkeydown(key.keysym);
@@ -323,7 +323,7 @@ Guacamole.OnScreenKeyboard = function(layout) {
 
                     removeClass(keyboard, modifierClass);
                     delete modifierKeysyms[key.modifier];
-                    
+
                     // Send key event only if original keysym is meaningful
                     if (originalKeysym && osk.onkeyup)
                         osk.onkeyup(originalKeysym);
@@ -405,7 +405,7 @@ Guacamole.OnScreenKeyboard = function(layout) {
 
     /**
      * Fired whenever the user presses a key on this Guacamole.OnScreenKeyboard.
-     * 
+     *
      * @event
      * @param {!number} keysym
      *     The keysym of the key being pressed.
@@ -414,7 +414,7 @@ Guacamole.OnScreenKeyboard = function(layout) {
 
     /**
      * Fired whenever the user releases a key on this Guacamole.OnScreenKeyboard.
-     * 
+     *
      * @event
      * @param {!number} keysym
      *     The keysym of the key being released.
@@ -442,7 +442,7 @@ Guacamole.OnScreenKeyboard = function(layout) {
      * Resizes all elements within this Guacamole.OnScreenKeyboard such that
      * the width is close to but does not exceed the specified width. The
      * height of the keyboard is determined based on the width.
-     * 
+     *
      * @param {!number} width
      *     The width to resize this Guacamole.OnScreenKeyboard to, in pixels.
      */
@@ -473,13 +473,13 @@ Guacamole.OnScreenKeyboard = function(layout) {
      *     The object defining the behavior of the key having the given name,
      *     which may be the title of the key (a string), the keysym (a number),
      *     a single Key object, or an array of Key objects.
-     *     
+     *
      * @returns {!Guacamole.OnScreenKeyboard.Key[]}
      *     An array of all keys associated with the given name.
      */
     var asKeyArray = function asKeyArray(name, object) {
 
-        // If already an array, just coerce into a true Key[] 
+        // If already an array, just coerce into a true Key[]
         if (object instanceof Array) {
             var keys = [];
             for (var i=0; i < object.length; i++) {
@@ -578,7 +578,7 @@ Guacamole.OnScreenKeyboard = function(layout) {
      * structure object provided. If a name is provided, an additional CSS
      * class, prepended with "guac-keyboard-", will be added to the top-level
      * element.
-     * 
+     *
      * If the layout structure object is an array, all elements within that
      * array will be recursively appended as children of a group, and the
      * top-level element will be given the CSS class "guac-keyboard-group".
@@ -596,7 +596,7 @@ Guacamole.OnScreenKeyboard = function(layout) {
      * first be transformed into the C-style hexadecimal literal for the
      * Unicode codepoint of that character. For example, the key "A" would
      * become "guac-keyboard-key-0x41".
-     * 
+     *
      * If the layout structure object is a number, a gap of that size will be
      * inserted. The gap will be given the CSS class "guac-keyboard-gap", and
      * will be scaled according to the same size units as each key.
@@ -642,15 +642,15 @@ Guacamole.OnScreenKeyboard = function(layout) {
             addClass(div, 'guac-keyboard-group');
 
             // Append all children, sorted by name
-            var names = Object.keys(object).sort();
-            for (i=0; i < names.length; i++) {
-                var name = names[i];
-                appendElements(div, object[name], name);
+            var childNames = Object.keys(object).sort();
+            for (i=0; i < childNames.length; i++) {
+                var childName = childNames[i];
+                appendElements(div, object[childName], childName);
             }
 
         }
 
-        // If a number, create as a gap 
+        // If a number, create as a gap
         else if (typeof object === 'number') {
 
             // Add gap class
@@ -872,7 +872,7 @@ Guacamole.OnScreenKeyboard.Layout = function(template) {
  * @param {!(Guacamole.OnScreenKeyboard.Key|object)} template
  *     The object whose identically-named properties will be used to initialize
  *     the properties of this key.
- *     
+ *
  * @param {string} [name]
  *     The name to use instead of any name provided within the template, if
  *     any. If omitted, the name within the template will be used, assuming the
@@ -928,7 +928,7 @@ Guacamole.OnScreenKeyboard.Key = function(template, name) {
      * the names of keys; both the "RightShift" and "LeftShift" keys may set
      * the "shift" modifier, for example. By default, the key will affect no
      * modifiers.
-     * 
+     *
      * @type {string}
      */
     this.modifier = template.modifier;