fix: portal injects

example/src/demos/Portals.tsx

@@ -35,7 +35,7 @@ export function Soda(props: any) {
     'https://market-assets.fra1.cdn.digitaloceanspaces.com/market-assets/models/soda-bottle/model.gltf',
   ) as any
   return (
-    <group {...props} {...spread} dispose={null}>
+    <group {...(spread as any)} {...props} dispose={null}>
       <mesh geometry={nodes.Mesh_sodaBottle.geometry}>
         <meshStandardMaterial color={hovered ? 'red' : 'green'} />
       </mesh>
@@ -113,6 +113,7 @@ const App = () => (
         <Farm scale={10} rotation={[0, 0, 0]} position={[-1, -2, -10]} />
         <Soda scale={5} position={[2, -2, -1.5]} />
         <Portal scale={[4, 5, 1]} position={[2, 0, -5]} rotation={[0, 0, 0]}>
+          <Test />
           <Lights />
           <Soda scale={8} position={[0, -2, -1.5]} />
           <Environment preset="city" background="only" />
@@ -121,8 +122,16 @@ const App = () => (
       <Ramen scale={4} position={[-2, 0, 2]} />
       <Soda scale={5} position={[1.5, 0, 3]} />
     </group>
-    <OrbitControls />
+    <OrbitControls makeDefault />
   </Canvas>
 )
 
+function Test() {
+  const controls = useThree((state) => state.controls)
+  console.log(controls)
+  useFrame((state) => {
+    //console.log(state.pointer.x)
+  })
+}
+
 export default App

packages/fiber/src/core/events.ts

@@ -267,6 +267,7 @@ export function createEvents(store: UseBoundStore<RootState>) {
     callback: (event: ThreeEvent<DomEvent>) => void,
   ) {
     const rootState = store.getState()
+
     // If anything has been found, forward it to the event listeners
     if (intersections.length) {
       const localState = { stopped: false }
@@ -424,7 +425,7 @@ export function createEvents(store: UseBoundStore<RootState>) {
       const isPointerMove = name === 'onPointerMove'
       const isClickEvent = name === 'onClick' || name === 'onContextMenu' || name === 'onDoubleClick'
       const filter = isPointerMove ? filterPointerEvents : undefined
-      // const hits = patchIntersects(intersect(filter), event)
+
       const hits = intersect(event, filter)
       const delta = isClickEvent ? calculateDistance(event) : 0
 
@@ -449,6 +450,7 @@ export function createEvents(store: UseBoundStore<RootState>) {
         const eventObject = data.eventObject
         const instance = (eventObject as unknown as Instance).__r3f
         const handlers = instance?.handlers
+
         // Check presence of handlers
         if (!instance?.eventCount) return
 

packages/fiber/src/core/index.tsx

@@ -435,7 +435,6 @@ function Portal({
    *  the "R3F hooks can only be used within the Canvas component!" warning:
    *  <Canvas>
    *    {createPortal(...)} */
-
   const { events, size, ...rest } = state
   const previousRoot = useStore()
   const [raycaster] = React.useState(() => new THREE.Raycaster())
@@ -453,7 +452,9 @@ function Portal({
           // Some props should be off-limits
           privateKeys.includes(key as PrivateKeys) ||
           // Otherwise filter out the props that are different and let the inject layer take precedence
-          rootState[key as keyof RootState] !== injectState[key as keyof RootState]
+          // Unless the inject layer props is undefined, then we keep the root layer
+          (rootState[key as keyof RootState] !== injectState[key as keyof RootState] &&
+            injectState[key as keyof RootState])
         ) {
           delete intersect[key as keyof RootState]
         }