useImperativeHandle returns null if node is null

We shouldn't create an object if the underlying node is null, as this
handle is meant to emulate the node but can't proxy methods if none
exist.

Author: necolas

packages/react-strict-dom/src/native/modules/useStrictDOMElement.js

@@ -43,62 +43,65 @@ export function useStrictDOMElement<T>(
   const { scale: viewportScale } = useViewportScale();
 
   React.useImperativeHandle(ref, () => {
-    return {
-      get __nativeTag() {
-        const node = nativeRef.current as Node;
-        return node?.__nativeTag;
-      },
-      addEventListener: proxy(nativeRef, 'addEventListener'),
-      animate: proxy(nativeRef, 'animate'),
-      blur: proxy(nativeRef, 'blur'),
-      click: proxy(nativeRef, 'click'),
-      get complete() {
-        if (tagName === 'img') {
-          const node = nativeRef.current as Node;
-          if (node?.complete == null) {
-            // Assume images are never pre-loaded in React Native
-            return false;
-          } else {
-            return node.complete;
-          }
-        }
-      },
-      contains: proxy(nativeRef, 'contains'),
-      dispatchEvent: proxy(nativeRef, 'dispatchEvent'),
-      focus: proxy(nativeRef, 'focus'),
-      getAttribute: proxy(nativeRef, 'getAttribute'),
-      getBoundingClientRect() {
-        const node = nativeRef.current as Node;
-        const getBoundingClientRect =
-          node?.getBoundingClientRect ?? node?.unstable_getBoundingClientRect;
-        if (getBoundingClientRect) {
-          const rect = getBoundingClientRect.call(node);
-          if (viewportScale !== 1) {
-            return new DOMRect(
-              rect.x / viewportScale,
-              rect.y / viewportScale,
-              rect.width / viewportScale,
-              rect.height / viewportScale
-            );
-          }
-          return rect;
-        }
-        return errorUnimplemented('getBoundingClientRect');
-      },
-      getRootNode: proxy(nativeRef, 'getRootNode'),
-      hasPointerCapture: proxy(nativeRef, 'hasPointerCapture'),
-      nodeName: tagName.toUpperCase(),
-      releasePointerCapture: proxy(nativeRef, 'releasePointerCapture'),
-      removeEventListener: proxy(nativeRef, 'removeEventListener'),
-      scroll: proxy(nativeRef, 'scroll'),
-      scrollBy: proxy(nativeRef, 'scrollBy'),
-      scrollIntoView: proxy(nativeRef, 'scrollIntoView'),
-      scrollTo: proxy(nativeRef, 'scrollTo'),
-      select: proxy(nativeRef, 'select'),
-      setSelectionRange: proxy(nativeRef, 'setSelectionRange'),
-      setPointerCapture: proxy(nativeRef, 'setPointerCapture'),
-      showPicker: proxy(nativeRef, 'showPicker')
-    };
+    return nativeRef.current == null
+      ? null
+      : {
+          get __nativeTag() {
+            const node = nativeRef.current as Node;
+            return node?.__nativeTag;
+          },
+          addEventListener: proxy(nativeRef, 'addEventListener'),
+          animate: proxy(nativeRef, 'animate'),
+          blur: proxy(nativeRef, 'blur'),
+          click: proxy(nativeRef, 'click'),
+          get complete() {
+            if (tagName === 'img') {
+              const node = nativeRef.current as Node;
+              if (node?.complete == null) {
+                // Assume images are never pre-loaded in React Native
+                return false;
+              } else {
+                return node.complete;
+              }
+            }
+          },
+          contains: proxy(nativeRef, 'contains'),
+          dispatchEvent: proxy(nativeRef, 'dispatchEvent'),
+          focus: proxy(nativeRef, 'focus'),
+          getAttribute: proxy(nativeRef, 'getAttribute'),
+          getBoundingClientRect() {
+            const node = nativeRef.current as Node;
+            const getBoundingClientRect =
+              node?.getBoundingClientRect ??
+              node?.unstable_getBoundingClientRect;
+            if (getBoundingClientRect) {
+              const rect = getBoundingClientRect.call(node);
+              if (viewportScale !== 1) {
+                return new DOMRect(
+                  rect.x / viewportScale,
+                  rect.y / viewportScale,
+                  rect.width / viewportScale,
+                  rect.height / viewportScale
+                );
+              }
+              return rect;
+            }
+            return errorUnimplemented('getBoundingClientRect');
+          },
+          getRootNode: proxy(nativeRef, 'getRootNode'),
+          hasPointerCapture: proxy(nativeRef, 'hasPointerCapture'),
+          nodeName: tagName.toUpperCase(),
+          releasePointerCapture: proxy(nativeRef, 'releasePointerCapture'),
+          removeEventListener: proxy(nativeRef, 'removeEventListener'),
+          scroll: proxy(nativeRef, 'scroll'),
+          scrollBy: proxy(nativeRef, 'scrollBy'),
+          scrollIntoView: proxy(nativeRef, 'scrollIntoView'),
+          scrollTo: proxy(nativeRef, 'scrollTo'),
+          select: proxy(nativeRef, 'select'),
+          setSelectionRange: proxy(nativeRef, 'setSelectionRange'),
+          setPointerCapture: proxy(nativeRef, 'setPointerCapture'),
+          showPicker: proxy(nativeRef, 'showPicker')
+        };
   }, [tagName, viewportScale]);
 
   return nativeRef;

packages/react-strict-dom/tests/html-test.native.js

@@ -1563,6 +1563,20 @@ describe('<html.*>', () => {
     });
     */
 
+    // We shouldn't create a handle if there is no underlying node
+    test('node is null', () => {
+      act(() => {
+        create(
+          <html.input
+            ref={(node) => {
+              expect(() => node.getBoundingClientRect()).toThrow();
+            }}
+          />,
+          { createNodeMock: () => null }
+        );
+      });
+    });
+
     [
       'animate',
       'click',