fix(NavigationManager): fix render order and storybook glitches

packages/@lightningjs/ui-components/src/components/FocusManager/FocusManager.d.ts

@@ -176,8 +176,9 @@ declare class FocusManager<
   /**
    * Selects next item. If this.wrapSelected=true, will select the first element in the list if focus is currently on the last item.
    * emits the `selectedChange` signal
+   * @param shouldSmoothOverride allows setting the shouldSmooth value before the select update
    */
-  selectNext(): void;
+  selectNext(shouldSmoothOverride?: boolean): void;
 
   /**
    * Selects previous item. If this.wrapSelected=true, will select the last element in the list if focus is currently on the first item.

packages/@lightningjs/ui-components/src/components/FocusManager/FocusManager.js

@@ -26,7 +26,6 @@ import {
   getX,
   getY,
   isComponentOnScreen,
-  delayForAnimation,
   getShortestDistance
 } from '../../utils';
 
@@ -114,6 +113,12 @@ export default class FocusManager extends Base {
       x: this.itemPosX,
       y: this.itemPosY
     });
+
+    // This fixes an issue when trying to call set items if there are already items held in _lazyItems.
+    // Going to follow up on a review of this feature.
+    if (this._lazyItems) {
+      this._lazyItems = null;
+    }
   }
 
   _appendLazyItem(item) {
@@ -171,7 +176,7 @@ export default class FocusManager extends Base {
     // If the first item has skip focus when appended get the next focusable item
     const initialSelection = this.Items.children[this.selectedIndex];
     if (initialSelection && initialSelection.skipFocus) {
-      this.selectNext();
+      this.selectNext(false);
     }
   }
 
@@ -259,13 +264,12 @@ export default class FocusManager extends Base {
     return false;
   }
 
-  selectNext() {
-    this.shouldSmooth = true;
+  selectNext(shouldSmoothOverride) {
     if (this._lazyItems && this._lazyItems.length) {
-      delayForAnimation(() => {
-        this._appendLazyItem(this._lazyItems.splice(0, 1)[0]);
-      });
+      this._appendLazyItem(this._lazyItems.splice(0, 1)[0]);
     }
+    this.shouldSmooth = shouldSmoothOverride ?? true;
+
     const hasFocusable = !!(this.items || []).filter(i => !i.skipFocus).length;
     if (
       (this.selectedIndex === this.Items.children.length - 1 &&

packages/@lightningjs/ui-components/src/components/FocusManager/FocusManager.mdx

@@ -159,6 +159,6 @@ A no-op function that is called when `selectedIndex` is set. Can be overridden b
 
 Selects the previous item in the FocusManager's children. If wrapSelected is true, it selects the last item if the focus is currently on the first item.
 
-#### selectNext(): void
+#### selectNext(shouldSmoothOverride?: boolean): void
 
-Selects the next item in the FocusManager's children. If wrapSelected is true, it selects the first item if the focus is currently on the last item.
+Selects the next item in the FocusManager's children. If wrapSelected is true, it selects the first item if the focus is currently on the last item. `shouldSmoothOverride` overrides the value of shouldSmooth before the next element is selected.

packages/@lightningjs/ui-components/src/components/GridOverlay/__snapshots__/GridOverlay.test.js.snap

@@ -81,7 +81,7 @@ exports[`GridOverlay renders 1`] = `
               },
               "visible": true,
               "w": 144,
-              "x": 0,
+              "x": 164,
               "y": 0,
               "zIndex": 0,
             },
@@ -116,7 +116,7 @@ exports[`GridOverlay renders 1`] = `
               },
               "visible": true,
               "w": 144,
-              "x": 0,
+              "x": 328,
               "y": 0,
               "zIndex": 0,
             },
@@ -151,7 +151,7 @@ exports[`GridOverlay renders 1`] = `
               },
               "visible": true,
               "w": 144,
-              "x": 0,
+              "x": 492,
               "y": 0,
               "zIndex": 0,
             },
@@ -186,7 +186,7 @@ exports[`GridOverlay renders 1`] = `
               },
               "visible": true,
               "w": 144,
-              "x": 0,
+              "x": 656,
               "y": 0,
               "zIndex": 0,
             },
@@ -221,7 +221,7 @@ exports[`GridOverlay renders 1`] = `
               },
               "visible": true,
               "w": 144,
-              "x": 0,
+              "x": 820,
               "y": 0,
               "zIndex": 0,
             },
@@ -256,7 +256,7 @@ exports[`GridOverlay renders 1`] = `
               },
               "visible": true,
               "w": 144,
-              "x": 0,
+              "x": 984,
               "y": 0,
               "zIndex": 0,
             },
@@ -291,7 +291,7 @@ exports[`GridOverlay renders 1`] = `
               },
               "visible": true,
               "w": 144,
-              "x": 0,
+              "x": 1148,
               "y": 0,
               "zIndex": 0,
             },
@@ -326,7 +326,7 @@ exports[`GridOverlay renders 1`] = `
               },
               "visible": true,
               "w": 144,
-              "x": 0,
+              "x": 1312,
               "y": 0,
               "zIndex": 0,
             },
@@ -361,7 +361,7 @@ exports[`GridOverlay renders 1`] = `
               },
               "visible": true,
               "w": 144,
-              "x": 0,
+              "x": 1476,
               "y": 0,
               "zIndex": 0,
             },
@@ -371,7 +371,7 @@ exports[`GridOverlay renders 1`] = `
           "enabled": true,
           "flex": false,
           "flexItem": false,
-          "h": 0,
+          "h": 1080,
           "isComponent": undefined,
           "mount": 0,
           "mountX": 0,
@@ -391,7 +391,7 @@ exports[`GridOverlay renders 1`] = `
             "Items",
           ],
           "visible": true,
-          "w": 0,
+          "w": 1620,
           "x": 0,
           "y": 0,
           "zIndex": 0,

packages/@lightningjs/ui-components/src/components/Keyboard/Keyboard.js

@@ -110,8 +110,7 @@ export default class Keyboard extends Base {
           },
           autoResizeWidth: true,
           autoResizeHeight: true,
-          neverScroll: true,
-          waitForDimensions: true
+          neverScroll: true
         }
       });
     }
@@ -123,15 +122,14 @@ export default class Keyboard extends Base {
         type: Row,
         autoResizeHeight: true,
         autoResizeWidth: true,
-        centerInParent: this.centerKeyboard,
+        centerInParent: this.centerKeys,
         neverScroll: true,
         wrapSelected: this.rowWrap !== undefined ? this.rowWrap : true,
         style: {
           itemSpacing: this.style.keySpacing
         },
         items: this._createKeys(keys, keyboard),
-        selectedIndex: this._currentKeyboard?.selected?.selectedIndex || 0,
-        waitForDimensions: true
+        selectedIndex: this._currentKeyboard?.selected?.selectedIndex || 0
       };
     });
   }