Fix cursor position when editing a group chat name (#10872)

Author: ds-boyce

src/screens/Messages/ConversationSettings/index.tsx

@@ -347,6 +347,13 @@ function SettingsHeader({
 
   const groupName = convo.details.name
   const [newGroupName, setNewGroupName] = useState(groupName)
+  const [editNameInputKey, setEditNameInputKey] = useState(0)
+
+  const openEditNamePrompt = () => {
+    setNewGroupName(groupName)
+    setEditNameInputKey(k => k + 1)
+    editNamePrompt.open()
+  }
 
   const lockStatus = convo.details.lockStatus
 
@@ -485,10 +492,7 @@ function SettingsHeader({
             accessibilityRole="button"
             accessibilityHint={l`Edit this group chat’s name`}
             hitSlop={HITSLOP_10}
-            onPress={() => {
-              setNewGroupName(groupName)
-              editNamePrompt.open()
-            }}>
+            onPress={openEditNamePrompt}>
             {groupNameComponent}
           </Pressable>
         ) : (
@@ -538,10 +542,7 @@ function SettingsHeader({
               icon={EditIcon}
               label={l`Edit this group chat’s name`}
               text={l`Edit name`}
-              onPress={() => {
-                setNewGroupName(groupName)
-                editNamePrompt.open()
-              }}
+              onPress={openEditNamePrompt}
             />
           ) : null}
           {isJoinLinkEnabled ? (
@@ -597,6 +598,7 @@ function SettingsHeader({
       <EditNamePrompt
         control={editNamePrompt}
         value={newGroupName}
+        inputKey={editNameInputKey}
         onChangeText={setNewGroupName}
         onConfirm={() => editGroupName({name: newGroupName})}
       />

src/screens/Messages/ConversationSettings/prompts.tsx

@@ -12,11 +12,18 @@ import {Text} from '#/components/Typography'
 export function EditNamePrompt({
   control,
   value,
+  inputKey,
   onChangeText,
   onConfirm,
 }: {
   control: Dialog.DialogOuterProps['control']
   value: string
+  /**
+   * Bump this whenever the prompt is opened to remount the (uncontrolled)
+   * input and reseed it from `value`. Required because the native bottom sheet
+   * keeps its children mounted across opens.
+   */
+  inputKey: number
   onChangeText: (value: string) => void
   onConfirm: () => void
 }) {
@@ -38,9 +45,10 @@ export function EditNamePrompt({
           <View style={[a.my_sm]}>
             <TextField.Root isInvalid={nameTooLong}>
               <TextField.Input
+                key={inputKey}
                 label={l`Edit group name`}
                 placeholder={l`Group name`}
-                value={value}
+                defaultValue={value}
                 onChangeText={onChangeText}
                 returnKeyType="done"
                 autoCapitalize="none"