Unblock React Compiler for 4 components with deferred ref access (#11549)

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/components/forms/SearchInput.tsx

@@ -47,7 +47,13 @@ export function SearchInput({
       <TextField.Root>
         <TextField.Icon icon={MagnifyingGlassIcon} />
         <TextField.Input
-          inputRef={mergeRefs([internalRef, ref])}
+          /*
+           * Deferred into the callback: React Compiler only special-cases the
+           * `ref` prop, so a merged ref built during render and handed to
+           * `inputRef` reads as accessing a ref. `mergeRefs` already returns a
+           * fresh function per render, so this adds no identity churn.
+           */
+          inputRef={node => mergeRefs([internalRef, ref])(node)}
           label={label || l`Search`}
           value={value}
           placeholder={l`Search`}

src/components/forms/TextField.tsx

@@ -26,6 +26,7 @@ import {
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {type Props as SVGIconProps} from '#/components/icons/common'
 import {Text} from '#/components/Typography'
+import {IS_WEB} from '#/env'
 
 const Context = createContext<{
   inputRef: React.RefObject<React.ComponentRef<typeof TextInput> | null> | null
@@ -101,11 +102,13 @@ export function Root({children, isInvalid = false, style}: RootProps) {
           {zIndex: 0},
           style,
         ]}
-        {...web({
-          onClick: () => inputRef.current?.focus(),
-          onMouseOver: onHoverIn,
-          onMouseOut: onHoverOut,
-        })}>
+        {...(IS_WEB
+          ? {
+              onClick: () => inputRef.current?.focus(),
+              onMouseOver: onHoverIn,
+              onMouseOut: onHoverOut,
+            }
+          : {})}>
         {children}
       </View>
     </Context.Provider>