FIx anchorRef handling

src/components/Composer/index.tsx

@@ -69,7 +69,6 @@ export type ComposerInternalApi = {
   input?: ReturnType<typeof useTapper>['input']
   clear: () => void
   insert(text: string): void
-  setAnchorRef(ref: View | null): void
 }
 
 export function useComposerInternalApiRef() {
@@ -91,7 +90,8 @@ export type ComposerProps = Omit<
   | 'onSubmitEditing'
 > & {
   label: string
-  ref?: React.Ref<TextInput>
+  ref?: React.RefObject<TextInput>
+  autocompleteAnchorRef?: React.RefObject<View | null>
   internalApiRef?: React.Ref<ComposerInternalApi>
   outerStyle?: ViewStyleProp['style']
   contentTextStyle?: TextStyleProp['style']
@@ -116,6 +116,7 @@ export function Composer({
   label,
   ref,
   internalApiRef,
+  autocompleteAnchorRef,
   outerStyle,
   contentTextStyle,
   contentPaddingStyle,
@@ -173,13 +174,16 @@ export function Composer({
         inputScrollSharedValue.value = 0
       },
       insert: tapper.insert,
-      setAnchorRef: (ref: View | null) => {
-        sift.refs.setAnchor(ref)
-      },
     }),
-    [tapper.input, tapper.insert, inputScrollSharedValue, sift.refs],
+    [tapper.input, tapper.insert, inputScrollSharedValue],
   )
 
+  useEffect(() => {
+    if (autocompleteAnchorRef) {
+      sift.refs.setAnchor(autocompleteAnchorRef.current)
+    }
+  }, [sift.refs])
+
   /*
    * Skip the initial mount to avoid an unnecessary re-render — the parent
    * already knows the initial value since it passed `initialText`.

src/screens/Messages/components/MessageComposer.tsx

@@ -1,4 +1,4 @@
-import {useCallback, useEffect, useState} from 'react'
+import {useCallback, useEffect, useRef, useState} from 'react'
 import {Pressable, View} from 'react-native'
 import {useLingui} from '@lingui/react/macro'
 import {countGraphemes} from 'unicode-segmenter/grapheme'
@@ -46,6 +46,7 @@ export function MessageComposer({
     isOpen: false,
     pos: {top: 0, left: 0, right: 0, bottom: 0, nextFocusRef: null},
   })
+  const anchorRef = useRef<View>(null)
   const composerInternalApiRef = useComposerInternalApiRef()
 
   const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
@@ -109,11 +110,8 @@ export function MessageComposer({
         {children}
 
         <View
-          ref={node => {
-            if (!IS_WEB && node) {
-              composerInternalApiRef.current?.setAnchorRef(node)
-            }
-          }}
+          collapsable={false}
+          ref={IS_WEB ? undefined : anchorRef}
           // @ts-expect-error web only
           onMouseEnter={onHoverIn}
           onMouseLeave={onHoverOut}
@@ -173,6 +171,7 @@ export function MessageComposer({
             label={l`Message input field`}
             placeholder={l`Write a message`}
             autocompletePlacement="top-start"
+            autocompleteAnchorRef={anchorRef}
             internalApiRef={composerInternalApiRef}
             defaultValue={text}
             editable={editable}