fix(focus): Fix FocusGroup getting added to wrong layers

WillsonHaw · WillsonHaw · commit 8d1ac425098e · 2025-11-19T20:37:38.000-08:00
Also bumps Lightning beta version
diff --git a/.changeset/free-ducks-film.md b/.changeset/free-ducks-film.md
@@ -0,0 +1,14 @@
+---
+"@plextv/vite-plugin-react-reanimated-lightning": patch
+"@plextv/vite-plugin-react-native-lightning": patch
+"@plextv/react-native-lightning-example": patch
+"@plextv/vite-plugin-msdf-fontgen": patch
+"@plextv/react-native-lightning": patch
+"@plextv/react-lightning-plugin-css-transform": patch
+"@plextv/react-lightning-example": patch
+"@plextv/react-lightning-plugin-reanimated": patch
+"@plextv/react-lightning": patch
+"@plextv/react-lightning-storybook": patch
+---
+
+chore: Update lightning versions
diff --git a/.changeset/rare-feet-hug.md b/.changeset/rare-feet-hug.md
@@ -0,0 +1,5 @@
+---
+"@plextv/react-lightning": patch
+---
+
+fix(focus): Fix case where FocusGroups sometimes get added to the wrong layer
diff --git a/apps/react-lightning-example/package.json b/apps/react-lightning-example/package.json
@@ -22,7 +22,7 @@
     "test:unit": "vitest run --passWithNoTests"
   },
   "dependencies": {
-    "@lightningjs/renderer": "3.0.0-beta15",
+    "@lightningjs/renderer": "3.0.0-beta16",
     "@plextv/react-lightning": "workspace:*",
     "@plextv/react-lightning-components": "workspace:*",
     "@plextv/react-lightning-plugin-css-transform": "workspace:*",
diff --git a/apps/react-native-lightning-example/package.json b/apps/react-native-lightning-example/package.json
@@ -22,7 +22,7 @@
     "test:unit": "vitest run --passWithNoTests"
   },
   "dependencies": {
-    "@lightningjs/renderer": "3.0.0-beta15",
+    "@lightningjs/renderer": "3.0.0-beta16",
     "@plextv/react-lightning": "workspace:*",
     "@plextv/react-lightning-components": "workspace:*",
     "@plextv/react-lightning-plugin-flexbox": "workspace:*",
diff --git a/apps/storybook/package.json b/apps/storybook/package.json
@@ -20,7 +20,7 @@
     "dev": "storybook dev -p 6006 --no-open"
   },
   "dependencies": {
-    "@lightningjs/renderer": "3.0.0-beta15",
+    "@lightningjs/renderer": "3.0.0-beta16",
     "@plextv/react-lightning": "workspace:*",
     "@plextv/react-lightning-components": "workspace:*",
     "@plextv/react-lightning-plugin-flexbox": "workspace:*",
diff --git a/packages/plugin-css-transform/package.json b/packages/plugin-css-transform/package.json
@@ -48,7 +48,7 @@
     "csstype": "3.1.3"
   },
   "peerDependencies": {
-    "@lightningjs/renderer": "3.0.0-beta15",
+    "@lightningjs/renderer": "3.0.0-beta16",
     "@plextv/react-lightning": "workspace:^",
     "@plextv/react-lightning-plugin-flexbox": "workspace:^",
     "react-native": "^0.82.0"
diff --git a/packages/plugin-reanimated/package.json b/packages/plugin-reanimated/package.json
@@ -46,7 +46,7 @@
     "@types/react": "19.2.2"
   },
   "peerDependencies": {
-    "@lightningjs/renderer": "3.0.0-beta15",
+    "@lightningjs/renderer": "3.0.0-beta16",
     "@plextv/react-lightning": "workspace:^",
     "@plextv/react-lightning-plugin-css-transform": "workspace:^",
     "@plextv/react-lightning-plugin-flexbox": "workspace:^",
diff --git a/packages/plugin-reanimated/src/animation/spring.ts b/packages/plugin-reanimated/src/animation/spring.ts
@@ -59,7 +59,6 @@ export function createSpringAnimation(
       delay: config.delay,
       loop: false,
       repeat: 0,
-      repeatDelay: 0,
       stopMethod: false,
     };
 
@@ -140,7 +139,6 @@ export function createSpringAnimation(
     delay: config.delay,
     loop: false,
     repeat: 0,
-    repeatDelay: 0,
     stopMethod: false,
   };
 
diff --git a/packages/plugin-reanimated/src/animation/timing.ts b/packages/plugin-reanimated/src/animation/timing.ts
@@ -17,7 +17,6 @@ export function createTimingAnimation(
     delay: config?.delay ?? 0,
     loop: false,
     repeat: 0,
-    repeatDelay: 0,
     stopMethod: false,
   };
 }
diff --git a/packages/react-lightning/package.json b/packages/react-lightning/package.json
@@ -52,7 +52,7 @@
     "@types/react-reconciler": "0.32.2"
   },
   "peerDependencies": {
-    "@lightningjs/renderer": "3.0.0-beta15",
+    "@lightningjs/renderer": "3.0.0-beta16",
     "react": "^19.2.0"
   },
   "volta": {
diff --git a/packages/react-lightning/src/focus/FocusGroup.tsx b/packages/react-lightning/src/focus/FocusGroup.tsx
@@ -104,11 +104,13 @@ export const FocusGroup = forwardRef<LightningElement, FocusGroupProps>(
 
     useEffect(() => {
       if (viewRef.current) {
+        viewRef.current.isFocusGroup = true;
         setViewElement(viewRef.current);
       }
 
       return () => {
         if (viewRef.current) {
+          viewRef.current.isFocusGroup = false;
           setViewElement(null);
         }
       };
diff --git a/packages/react-lightning/src/focus/FocusManager.spec.ts b/packages/react-lightning/src/focus/FocusManager.spec.ts
@@ -271,6 +271,30 @@ describe('FocusManager', () => {
     expect(focusManager.focusPath).toEqual([parent, child]);
   });
 
+  it('should handle lazily created elements', () => {
+    const parent = createMockElement(1, 'parent');
+    const modal = createMockElement(2, 'modal');
+    const modalChild = createMockElement(3, 'modalChild');
+    const modalGrandChild = createMockElement(4, 'modalGrandChild');
+
+    focusManager.addElement(parent);
+
+    // Simulate react creating elements bottom-up
+    focusManager.addElement(modal, parent);
+
+    focusManager.pushLayer();
+
+    focusManager.addElement(modalGrandChild, modalChild);
+    focusManager.addElement(modalChild, modal);
+
+    expect(focusManager.focusPath).toEqual([
+      parent,
+      modal,
+      modalChild,
+      modalGrandChild,
+    ]);
+  });
+
   describe('Layer Management (Modal Support)', () => {
     it('should create a new layer when pushLayer is called', () => {
       const mainElement = createMockElement(1, 'main');
@@ -454,6 +478,7 @@ describe('FocusManager', () => {
       // Push modal layer
       focusManager.pushLayer();
       focusManager.addElement(modalElement);
+
       expect(modalOpenedSpy).toHaveBeenCalledWith(
         undefined,
         undefined,
diff --git a/packages/react-lightning/src/focus/FocusManager.ts b/packages/react-lightning/src/focus/FocusManager.ts
@@ -62,7 +62,11 @@ function hasExternalRedirect<T extends { parent?: T | null }>(
 }
 
 export class FocusManager<
-  T extends Focusable & { id: number; parent?: T | null },
+  T extends Focusable & {
+    id: number;
+    parent?: T | null;
+    isFocusGroup?: boolean;
+  },
 > implements EventNotifier<FocusEvents<T>>
 {
   private _disposers: Map<T, (() => void)[]> = new Map();
@@ -122,11 +126,10 @@ export class FocusManager<
     options?: {
       autoFocus?: boolean;
       focusRedirect?: boolean;
-      destinations?: (T | null)[];
+      destinations?: (T | null)[] | null;
       traps?: Traps;
     },
   ) {
-    let parentNode: FocusNode<T> | RootNode<T>;
     const autoFocus = options?.autoFocus ?? false;
     const focusRedirect = options?.focusRedirect ?? false;
     const destinations = options?.destinations ?? null;
@@ -137,17 +140,38 @@ export class FocusManager<
       left: false,
     };
     const { elements, root } = this.activeLayer;
+    let parentNode: FocusNode<T> | RootNode<T> | null = null;
 
     if (parent) {
       const storedNode = elements.get(parent);
 
       if (!storedNode) {
-        parentNode = this._createFocusNode(parent, root);
+        // Check if the parent exists in the previous layer. Sometimes this
+        // happens because of the way React creates elements; components and
+        // their hooks are run before getting attached to the tree. This causes
+        // the component to get added to the old layer before the new layer's
+        // created.
+        const parentNodeInPreviousLayer:
+          | RootNode<T>
+          | FocusNode<T>
+          | undefined = this._focusStack.at(-2)?.elements?.get?.(parent);
+
+        if (
+          parentNodeInPreviousLayer &&
+          !isRootNode(parentNodeInPreviousLayer)
+        ) {
+          parentNode = this._addMissingParentsToCurrentLayer(
+            parentNodeInPreviousLayer,
+          );
+        }
+
+        if (!parentNode) {
+          parentNode = this._createFocusNode(parent, root);
+        }
 
         if (!root.focusedElement) {
           root.focusedElement = parentNode;
         }
-        elements.set(parent, parentNode);
       } else {
         parentNode = storedNode;
       }
@@ -377,6 +401,33 @@ export class FocusManager<
       .join(' > ');
   }
 
+  private _addMissingParentsToCurrentLayer(nodeFromAnotherLayer: FocusNode<T>) {
+    let curr: FocusNode<T> | RootNode<T> = nodeFromAnotherLayer;
+
+    const stack: FocusNode<T>[] = [];
+
+    // First build a stack of nodes to create
+    while (!isRootNode(curr)) {
+      stack.push(curr);
+      curr = curr.parent;
+    }
+
+    let prevNode: FocusNode<T> | null = null;
+
+    while (stack.length > 0) {
+      // biome-ignore lint/style/noNonNullAssertion: Already asserted stack is not empty
+      const nodeToCreate = stack.pop()!;
+      const parentNode = prevNode === null ? this.activeLayer.root : prevNode;
+      const newNode = this._createFocusNode(nodeToCreate.element, parentNode);
+
+      parentNode.focusedElement = newNode;
+
+      prevNode = newNode;
+    }
+
+    return prevNode;
+  }
+
   private _createFocusNode(
     element: T,
     parent: FocusNode<T> | RootNode<T>,
diff --git a/packages/react-native-lightning/package.json b/packages/react-native-lightning/package.json
@@ -54,7 +54,7 @@
     "@types/react-reconciler": "0.32.1"
   },
   "peerDependencies": {
-    "@lightningjs/renderer": "3.0.0-beta15",
+    "@lightningjs/renderer": "3.0.0-beta16",
     "@plextv/react-lightning": "workspace:^",
     "react": "^19.2.0",
     "react-native": "^0.82.0"
diff --git a/packages/vite-plugin-msdf-fontgen/package.json b/packages/vite-plugin-msdf-fontgen/package.json
@@ -17,7 +17,7 @@
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "types": "./dist/index-BZeJgyNV.d.ts",
   "exports": {
     ".": "./dist/index.js",
     "./package.json": "./package.json"
diff --git a/packages/vite-plugin-react-native-lightning/package.json b/packages/vite-plugin-react-native-lightning/package.json
@@ -19,7 +19,7 @@
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "types": "./dist/index-DnMelX_-.d.ts",
   "exports": {
     ".": "./dist/index.js",
     "./package.json": "./package.json"
diff --git a/packages/vite-plugin-react-reanimated-lightning/package.json b/packages/vite-plugin-react-reanimated-lightning/package.json
@@ -20,7 +20,7 @@
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "types": "./dist/index-DZReoLB_.d.ts",
   "exports": {
     ".": "./dist/index.js",
     "./package.json": "./package.json"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/templates/app-template/package.json b/templates/app-template/package.json

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@plextv/react-lightning": patch
 +---
++
 +fix(focus): Fix case where FocusGroups sometimes get added to the wrong layer
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,6 @@ export function createTimingAnimation(`
`17`	`17`	`delay: config?.delay ?? 0,`
`18`	`18`	`loop: false,`
`19`	`19`	`repeat: 0,`
`20`		`- repeatDelay: 0,`
`21`	`20`	`stopMethod: false,`
`22`	`21`	`};`
`23`	`22`	`}`