fix(react): resolve open-on-mount bug and missing placeholder dimensions

Author: Shakya47

packages/core/tests/keyboard-bridge.test.ts

@@ -22,11 +22,19 @@ describe('keyboard-bridge', () => {
 
     const handler = pipWin.addEventListener.mock.calls[0][1];
 
-    handler(new KeyboardEvent('keydown', { key: 'Escape' }));
+    const eventToDispatch = new KeyboardEvent('keydown', { key: 'Escape' });
+    Object.defineProperty(eventToDispatch, 'keyCode', { value: 27 });
+    Object.defineProperty(eventToDispatch, 'charCode', { value: 0 });
+    Object.defineProperty(eventToDispatch, 'which', { value: 27 });
+
+    handler(eventToDispatch);
 
     expect(openerWin.dispatchEvent).toHaveBeenCalled();
     const dispatchedEvent = openerWin.dispatchEvent.mock.calls[0][0] as KeyboardEvent;
     expect(dispatchedEvent.key).toBe('Escape');
+    expect(dispatchedEvent.keyCode).toBe(27);
+    expect(dispatchedEvent.charCode).toBe(0);
+    expect(dispatchedEvent.which).toBe(27);
 
     expect(dispatchSpy).not.toHaveBeenCalled();
 

packages/core/tests/styles.test.ts

@@ -43,10 +43,12 @@ describe('styles', () => {
     await new Promise(r => setTimeout(r, 10));
     expect(pipWindow.document.head.innerHTML).toContain('margin: 0');
 
-    // Change style text
-    style.textContent = 'p { margin: 10px; }';
-    await new Promise(r => setTimeout(r, 10));
-    // Since we're in jsdom, childData/characterData mutations might not be perfect, but let's test node removal
+    // Change style text via nodeValue to trigger characterData mutation
+    if (style.firstChild) {
+      style.firstChild.nodeValue = 'p { margin: 10px; }';
+    }
+    await new Promise(r => setTimeout(r, 50));
+    expect(pipWindow.document.head.innerHTML).toContain('margin: 10px');
 
     // Remove style
     document.head.removeChild(style);

packages/react/src/PipWrapper.tsx

@@ -146,13 +146,19 @@ export const PipWrapper = forwardRef<HTMLElement, PipWrapperProps>((props, ref)
     }
   }, [state.isOpen, onOpenChange]);
 
-  const prevControlledOpenRef = useRef(controlledOpen);
+  const prevControlledOpenRef = useRef(false);
   useEffect(() => {
     if (isControlled) {
       const changedToOpen = controlledOpen && !prevControlledOpenRef.current;
       const changedToClosed = !controlledOpen && prevControlledOpenRef.current;
 
       if (changedToOpen && !state.isOpen) {
+        if (contentRef.current) {
+          const rect = contentRef.current.getBoundingClientRect();
+          if (rect.width > 0 && rect.height > 0) {
+            lastSizeRef.current = { width: rect.width, height: rect.height };
+          }
+        }
         instance.open().catch(err => {
           if (err.name === 'NotAllowedError') {
             console.warn('[PipWrapper] PiP window opening blocked: requires user activation. Ensure the "open" prop is changed within a user gesture handler.');