fix: app crash when clicking next on create account screen (#2183)

app/src/main/kotlin/com/wire/android/ui/authentication/create/common/handle/UsernameTextField.kt

@@ -25,7 +25,6 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.autofill.AutofillType
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -35,9 +34,8 @@ import androidx.compose.ui.text.input.TextFieldValue
 import com.wire.android.R
 import com.wire.android.ui.common.ShakeAnimation
 import com.wire.android.ui.common.error.CoreFailureErrorDialog
-import com.wire.android.ui.common.textfield.AutoFillTextField
+import com.wire.android.ui.common.textfield.WireTextField
 import com.wire.android.ui.common.textfield.WireTextFieldState
-import com.wire.android.ui.common.textfield.clearAutofillTree
 import com.wire.android.ui.theme.wireDimensions
 
 @OptIn(ExperimentalComposeUiApi::class)
@@ -50,7 +48,6 @@ fun UsernameTextField(
     onUsernameChange: (TextFieldValue) -> Unit,
     onUsernameErrorAnimated: () -> Unit
 ) {
-    clearAutofillTree()
     if (errorState is HandleUpdateErrorState.DialogError.GenericError) {
         CoreFailureErrorDialog(errorState.coreFailure, onErrorDismiss)
     }
@@ -61,8 +58,7 @@ fun UsernameTextField(
             animate()
             onUsernameErrorAnimated()
         }
-        AutoFillTextField(
-            autofillTypes = listOf(AutofillType.Username),
+        WireTextField(
             value = username,
             onValueChange = onUsernameChange,
             placeholderText = stringResource(R.string.create_account_username_placeholder),

app/src/main/kotlin/com/wire/android/ui/authentication/create/email/CreateAccountEmailScreen.kt

@@ -25,7 +25,6 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -42,7 +41,6 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.autofill.AutofillType
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.platform.LocalContext
@@ -69,9 +67,8 @@ import com.wire.android.ui.common.button.WireButtonState
 import com.wire.android.ui.common.button.WirePrimaryButton
 import com.wire.android.ui.common.button.WireSecondaryButton
 import com.wire.android.ui.common.error.CoreFailureErrorDialog
-import com.wire.android.ui.common.textfield.AutoFillTextField
+import com.wire.android.ui.common.textfield.WireTextField
 import com.wire.android.ui.common.textfield.WireTextFieldState
-import com.wire.android.ui.common.textfield.clearAutofillTree
 import com.wire.android.ui.common.topappbar.WireCenterAlignedTopAppBar
 import com.wire.android.ui.theme.wireColorScheme
 import com.wire.android.ui.theme.wireDimensions
@@ -95,7 +92,7 @@ fun CreateAccountEmailScreen(viewModel: CreateAccountEmailViewModel, serverConfi
     )
 }
 
-@OptIn(ExperimentalComposeUiApi::class, ExperimentalLayoutApi::class)
+@OptIn(ExperimentalComposeUiApi::class)
 @Composable
 private fun EmailContent(
     state: CreateAccountEmailViewState,
@@ -109,7 +106,6 @@ private fun EmailContent(
     tosUrl: String,
     serverConfig: ServerConfig.Links
 ) {
-    clearAutofillTree()
     val focusRequester = remember { FocusRequester() }
 
     Scaffold(topBar = {
@@ -144,8 +140,7 @@ private fun EmailContent(
                     )
                     .testTag("createTeamText")
             )
-            AutoFillTextField(
-                autofillTypes = listOf(AutofillType.EmailAddress),
+            WireTextField(
                 value = state.email,
                 onValueChange = onEmailChange,
                 placeholderText = stringResource(R.string.create_account_email_placeholder),

app/src/main/kotlin/com/wire/android/ui/authentication/devices/register/RegisterDeviceScreen.kt

@@ -171,7 +171,8 @@ private fun PasswordTextField(state: RegisterDeviceState, onPasswordChange: (Tex
         keyboardActions = KeyboardActions(onDone = { keyboardController?.hide() }),
         modifier = Modifier
             .padding(horizontal = MaterialTheme.wireDimensions.spacing16x)
-            .testTag("password field")
+            .testTag("password field"),
+        autofill = true
     )
 }
 

app/src/main/kotlin/com/wire/android/ui/authentication/devices/remove/RemoveDeviceDialog.kt

@@ -84,7 +84,8 @@ fun RemoveDeviceDialog(
                 modifier = Modifier
                     .focusRequester(focusRequester)
                     .padding(bottom = MaterialTheme.wireDimensions.spacing8x)
-                    .testTag("remove device password field")
+                    .testTag("remove device password field"),
+                autofill = true
             )
             LaunchedEffect(Unit) { // executed only once when showing the dialog
                 focusRequester.requestFocus()

app/src/main/kotlin/com/wire/android/ui/authentication/login/email/LoginEmailScreen.kt

@@ -227,7 +227,8 @@ private fun PasswordInput(modifier: Modifier, password: TextFieldValue, onPasswo
         onValueChange = onPasswordChange,
         imeAction = ImeAction.Done,
         keyboardActions = KeyboardActions(onDone = { keyboardController?.hide() }),
-        modifier = modifier.testTag("passwordField")
+        modifier = modifier.testTag("passwordField"),
+        autofill = true
     )
 }
 

app/src/main/kotlin/com/wire/android/ui/authentication/login/email/ProxyScreen.kt

@@ -152,7 +152,7 @@ private fun ProxyPasswordInput(modifier: Modifier, proxyPassword: TextFieldValue
         labelText = stringResource(R.string.label_proxy_password),
         keyboardActions = KeyboardActions(onDone = { keyboardController?.hide() }),
         modifier = modifier.testTag("passwordField"),
-        autofillTypes = listOf()
+        autofill = false
     )
 }
 

app/src/main/kotlin/com/wire/android/ui/common/WireDialog.kt

@@ -272,7 +272,9 @@ fun PreviewWireDialog() {
             ) {
                 WirePasswordTextField(
                     value = password,
-                    onValueChange = { password = it })
+                    onValueChange = { password = it },
+                    autofill = false
+                )
             }
         }
     }
@@ -320,7 +322,9 @@ fun PreviewWireDialogWith2OptionButtons() {
             ) {
                 WirePasswordTextField(
                     value = password,
-                    onValueChange = { password = it })
+                    onValueChange = { password = it },
+                    autofill = true
+                )
             }
         }
     }

app/src/main/kotlin/com/wire/android/ui/common/textfield/AutoFillTextField.kt

@@ -29,9 +29,11 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.autofill.Autofill
 import androidx.compose.ui.autofill.AutofillNode
 import androidx.compose.ui.autofill.AutofillType
 import androidx.compose.ui.focus.onFocusChanged
+import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.layout.boundsInWindow
 import androidx.compose.ui.layout.onGloballyPositioned
@@ -70,7 +72,8 @@ internal fun AutoFillTextField(
     inputMinHeight: Dp = MaterialTheme.wireDimensions.textFieldMinHeight,
     shape: Shape = RoundedCornerShape(MaterialTheme.wireDimensions.textFieldCornerSize),
     colors: WireTextFieldColors = wireTextFieldColors(),
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
+    onTap: (Offset) -> Unit = { },
 ) {
     val autofillNode = AutofillNode(
         autofillTypes = autofillTypes,
@@ -103,19 +106,27 @@ internal fun AutoFillTextField(
         shape = shape,
         colors = colors,
         modifier = modifier
-            .onGloballyPositioned { autofillNode.boundingBox = it.boundsInWindow() }
-            .onFocusChanged { focusState ->
-                autofill?.run {
-                    if (focusState.isFocused) {
-                        requestAutofillForNode(autofillNode)
-                    } else {
-                        cancelAutofillForNode(autofillNode)
-                    }
-                }
-            }
+            .fillBounds(autofillNode)
+            .defaultOnFocusAutoFill(autofill, autofillNode),
+        onTap = onTap
     )
 }
 
+@OptIn(ExperimentalComposeUiApi::class)
+fun Modifier.fillBounds(autofillNode: AutofillNode) = this.then(
+    Modifier.onGloballyPositioned { autofillNode.boundingBox = it.boundsInWindow() }
+)
+
+@OptIn(ExperimentalComposeUiApi::class)
+fun Modifier.defaultOnFocusAutoFill(autofill: Autofill?, autofillNode: AutofillNode): Modifier =
+    then(Modifier.onFocusChanged { focusState ->
+        if (focusState.isFocused) {
+            autofill?.requestAutofillForNode(autofillNode)
+        } else {
+            autofill?.cancelAutofillForNode(autofillNode)
+        }
+    })
+
 @OptIn(ExperimentalComposeUiApi::class)
 @Composable
 fun clearAutofillTree() {

app/src/main/kotlin/com/wire/android/ui/common/textfield/WirePasswordTextField.kt

@@ -40,6 +40,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.autofill.AutofillType
+import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.stringResource
@@ -76,57 +77,99 @@ fun WirePasswordTextField(
     shape: Shape = RoundedCornerShape(16.dp),
     colors: WireTextFieldColors = wireTextFieldColors(),
     modifier: Modifier = Modifier,
-    autofillTypes: List<AutofillType>? = null
+    autofill: Boolean,
+    onTap: (Offset) -> Unit = { },
 ) {
     var passwordVisibility by remember { mutableStateOf(false) }
-    AutoFillTextField(
-        autofillTypes = autofillTypes ?: listOf(AutofillType.Password),
-        value = value,
-        onValueChange = onValueChange,
-        readOnly = readOnly,
-        singleLine = true,
-        maxLines = 1,
-        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password, autoCorrect = false, imeAction = imeAction),
-        keyboardActions = keyboardActions,
-        placeholderText = placeholderText,
-        labelText = labelText,
-        labelMandatoryIcon = labelMandatoryIcon,
-        descriptionText = descriptionText,
-        state = state,
-        interactionSource = interactionSource,
-        textStyle = textStyle,
-        placeholderTextStyle = placeHolderTextStyle,
-        inputMinHeight = inputMinHeight,
-        shape = shape,
-        colors = colors,
-        modifier = modifier,
-        visualTransformation = if (passwordVisibility) VisualTransformation.None else PasswordVisualTransformation(),
-        trailingIcon = {
-            val image = if (passwordVisibility) Icons.Filled.Visibility else Icons.Filled.VisibilityOff
-            IconButton(onClick = { passwordVisibility = !passwordVisibility }) {
-                Icon(
-                    imageVector = image,
-                    contentDescription = stringResource(
-                        if (!passwordVisibility) R.string.content_description_reveal_password
-                        else R.string.content_description_hide_password
-                    ),
-                    modifier = Modifier
-                        .size(20.dp)
-                        .testTag("hidePassword")
-                )
-            }
-        },
-    )
-}
 
+    val keyBoardOption = remember {
+        KeyboardOptions(keyboardType = KeyboardType.Password, autoCorrect = false, imeAction = imeAction)
+    }
+
+    val visualTransformation = remember(passwordVisibility) {
+        if (passwordVisibility) VisualTransformation.None else PasswordVisualTransformation()
+    }
+
+    val icon = remember(passwordVisibility) {
+        if (passwordVisibility) Icons.Filled.Visibility else Icons.Filled.VisibilityOff
+    }
+
+    val iconButton = @Composable {
+        IconButton(onClick = { passwordVisibility = !passwordVisibility }) {
+            Icon(
+                imageVector = icon,
+                contentDescription = stringResource(
+                    if (!passwordVisibility) R.string.content_description_reveal_password
+                    else R.string.content_description_hide_password
+                ),
+                modifier = Modifier
+                    .size(20.dp)
+                    .testTag("hidePassword")
+            )
+        }
+    }
+
+    if (autofill) {
+        AutoFillTextField(
+            value = value,
+            onValueChange = onValueChange,
+            readOnly = readOnly,
+            singleLine = true,
+            maxLines = 1,
+            keyboardOptions = keyBoardOption,
+            keyboardActions = keyboardActions,
+            placeholderText = placeholderText,
+            labelText = labelText,
+            labelMandatoryIcon = labelMandatoryIcon,
+            descriptionText = descriptionText,
+            state = state,
+            interactionSource = interactionSource,
+            textStyle = textStyle,
+            placeholderTextStyle = placeHolderTextStyle,
+            inputMinHeight = inputMinHeight,
+            shape = shape,
+            colors = colors,
+            modifier = modifier,
+            visualTransformation = visualTransformation,
+            trailingIcon = iconButton,
+            autofillTypes = listOf(AutofillType.Password),
+            onTap = onTap
+        )
+    } else {
+        WireTextField(
+            value = value,
+            onValueChange = onValueChange,
+            readOnly = readOnly,
+            singleLine = true,
+            maxLines = 1,
+            keyboardOptions = keyBoardOption,
+            keyboardActions = keyboardActions,
+            placeholderText = placeholderText,
+            labelText = labelText,
+            labelMandatoryIcon = labelMandatoryIcon,
+            descriptionText = descriptionText,
+            state = state,
+            interactionSource = interactionSource,
+            textStyle = textStyle,
+            placeholderTextStyle = placeHolderTextStyle,
+            inputMinHeight = inputMinHeight,
+            shape = shape,
+            colors = colors,
+            modifier = modifier,
+            visualTransformation = visualTransformation,
+            trailingIcon = iconButton,
+            onTap = onTap
+        )
+    }
+}
 
-@OptIn(ExperimentalComposeUiApi::class)
 @Preview(name = "Default WirePasswordTextField")
 @Composable
 fun PreviewWirePasswordTextField() {
     WirePasswordTextField(
         value = TextFieldValue(""),
         onValueChange = {},
-        modifier = Modifier.padding(16.dp)
+        modifier = Modifier.padding(16.dp),
+        autofill = false
     )
 }

app/src/main/kotlin/com/wire/android/ui/home/settings/backup/dialog/create/CreateBackupDialogs.kt

@@ -33,7 +33,6 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.input.TextFieldValue
@@ -52,7 +51,6 @@ import com.wire.android.util.permission.rememberCreateFileFlow
 import java.util.Locale
 import kotlin.math.roundToInt
 
-@OptIn(ExperimentalComposeUiApi::class)
 @Composable
 fun SetBackupPasswordDialog(
     isBackupPasswordValid: Boolean,
@@ -85,7 +83,8 @@ fun SetBackupPasswordDialog(
             onValueChange = {
                 backupPassword = it
                 onBackupPasswordChanged(it)
-            }
+            },
+            autofill = false
         )
     }
 }

app/src/main/kotlin/com/wire/android/ui/home/settings/backup/dialog/restore/RestoreBackupDialogs.kt

@@ -102,7 +102,8 @@ fun EnterRestorePasswordDialog(
         ) {
             WirePasswordTextField(
                 value = restorePassword,
-                onValueChange = { restorePassword = it }
+                onValueChange = { restorePassword = it },
+                autofill = false
             )
         }
     } else {