Fix anchor ref placement

src/components/Composer/index.tsx

@@ -69,6 +69,7 @@ export type ComposerInternalApi = {
   input?: ReturnType<typeof useTapper>['input']
   clear: () => void
   insert(text: string): void
+  setAutocompleteAnchor: (node: View | null) => void
 }
 
 export function useComposerInternalApiRef() {
@@ -91,7 +92,6 @@ export type ComposerProps = Omit<
 > & {
   label: string
   ref?: React.RefObject<TextInput>
-  autocompleteAnchorRef?: React.RefObject<View | null>
   internalApiRef?: React.Ref<ComposerInternalApi>
   outerStyle?: ViewStyleProp['style']
   contentTextStyle?: TextStyleProp['style']
@@ -116,7 +116,6 @@ export function Composer({
   label,
   ref,
   internalApiRef,
-  autocompleteAnchorRef,
   outerStyle,
   contentTextStyle,
   contentPaddingStyle,
@@ -150,7 +149,6 @@ export function Composer({
     placement: autocompletePlacement,
     dynamicWidth: IS_WEB,
     insets,
-    anchorRef: autocompleteAnchorRef,
   })
 
   /*
@@ -175,8 +173,9 @@ export function Composer({
         inputScrollSharedValue.value = 0
       },
       insert: tapper.insert,
+      setAutocompleteAnchor: sift.refs.setAnchor,
     }),
-    [tapper.input, tapper.insert, inputScrollSharedValue],
+    [tapper.input, tapper.insert, inputScrollSharedValue, sift.refs.setAnchor],
   )
 
   /*

src/screens/Messages/components/MessageComposer.tsx

@@ -1,4 +1,4 @@
-import {useCallback, useEffect, useRef, useState} from 'react'
+import {useCallback, useEffect, useState} from 'react'
 import {Pressable, View} from 'react-native'
 import {useLingui} from '@lingui/react/macro'
 import {countGraphemes} from 'unicode-segmenter/grapheme'
@@ -46,7 +46,6 @@ 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()
@@ -111,7 +110,13 @@ export function MessageComposer({
 
         <View
           collapsable={false}
-          ref={IS_WEB ? undefined : anchorRef}
+          ref={
+            IS_WEB
+              ? undefined
+              : node => {
+                  composerInternalApiRef.current?.setAutocompleteAnchor(node)
+                }
+          }
           // @ts-expect-error web only
           onMouseEnter={onHoverIn}
           onMouseLeave={onHoverOut}
@@ -171,7 +176,6 @@ export function MessageComposer({
             label={l`Message input field`}
             placeholder={l`Write a message`}
             autocompletePlacement="top-start"
-            autocompleteAnchorRef={anchorRef}
             internalApiRef={composerInternalApiRef}
             defaultValue={text}
             editable={editable}