Fix recompositions due to autofill

app/src/main/java/com/jerboa/Utils.kt

@@ -29,9 +29,10 @@ import androidx.compose.runtime.mutableStateListOf
 import androidx.compose.runtime.snapshots.SnapshotStateList
 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.AutofillTree
 import androidx.compose.ui.autofill.AutofillType
-import androidx.compose.ui.composed
 import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
@@ -40,8 +41,6 @@ import androidx.compose.ui.graphics.drawscope.DrawScope
 import androidx.compose.ui.layout.boundsInWindow
 import androidx.compose.ui.layout.layout
 import androidx.compose.ui.layout.onGloballyPositioned
-import androidx.compose.ui.platform.LocalAutofill
-import androidx.compose.ui.platform.LocalAutofillTree
 import androidx.compose.ui.unit.Constraints
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.TextUnit
@@ -64,6 +63,7 @@ import com.jerboa.ui.components.home.SiteViewModel
 import com.jerboa.ui.components.inbox.InboxTab
 import com.jerboa.ui.components.person.UserTab
 import com.jerboa.ui.theme.SMALL_PADDING
+import kotlinx.collections.immutable.ImmutableList
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.launch
 import org.ocpsoft.prettytime.PrettyTime
@@ -958,16 +958,14 @@ fun saveBitmapP(
 }
 
 @OptIn(ExperimentalComposeUiApi::class)
-fun Modifier.onAutofill(vararg autofillType: AutofillType, onFill: (String) -> Unit): Modifier = composed {
+fun Modifier.onAutofill(tree: AutofillTree, autofill: Autofill?, autofillTypes: ImmutableList<AutofillType>, onFill: (String) -> Unit): Modifier {
     val autofillNode = AutofillNode(
-        autofillTypes = autofillType.toList(),
+        autofillTypes = autofillTypes,
         onFill = onFill,
     )
-    LocalAutofillTree.current += autofillNode
+    tree += autofillNode
 
-    val autofill = LocalAutofill.current
-
-    this
+    return this
         .onGloballyPositioned {
             autofillNode.boundingBox = it.boundsInWindow()
         }

app/src/main/java/com/jerboa/ui/components/login/Login.kt

@@ -1,4 +1,4 @@
-@file:OptIn(ExperimentalMaterial3Api::class)
+@file:OptIn(ExperimentalMaterial3Api::class, ExperimentalComposeUiApi::class)
 
 package com.jerboa.ui.components.login
 
@@ -24,6 +24,8 @@ import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.autofill.AutofillType
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalAutofill
+import androidx.compose.ui.platform.LocalAutofillTree
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.input.KeyboardCapitalization
 import androidx.compose.ui.text.input.KeyboardType
@@ -39,6 +41,8 @@ import com.jerboa.R
 import com.jerboa.datatypes.types.Login
 import com.jerboa.db.Account
 import com.jerboa.onAutofill
+import kotlinx.collections.immutable.ImmutableList
+import kotlinx.collections.immutable.persistentListOf
 
 @Composable
 fun MyTextField(
@@ -47,7 +51,10 @@ fun MyTextField(
     placeholder: String? = null,
     text: String,
     onValueChange: (String) -> Unit,
+    autofillTypes: ImmutableList<AutofillType> = persistentListOf(),
 ) {
+    var wasAutofilled by remember { mutableStateOf(false) }
+
     OutlinedTextField(
         value = text,
         onValueChange = onValueChange,
@@ -59,20 +66,38 @@ fun MyTextField(
             keyboardType = KeyboardType.Text,
             autoCorrect = false,
         ),
-        modifier = modifier,
+        modifier = modifier
+            .width(OutlinedTextFieldDefaults.MinWidth)
+            .background(if (wasAutofilled) MaterialTheme.colorScheme.surfaceVariant else Color.Transparent)
+            .onAutofill(LocalAutofillTree.current, LocalAutofill.current, autofillTypes) {
+                onValueChange(it)
+                wasAutofilled = true
+            },
     )
 }
 
+@OptIn(ExperimentalComposeUiApi::class)
 @Composable
 fun PasswordField(
     modifier: Modifier = Modifier,
     password: String,
     onValueChange: (String) -> Unit,
 ) {
+    var wasAutofilled by remember { mutableStateOf(false) }
     var passwordVisibility by remember { mutableStateOf(false) }
 
     OutlinedTextField(
-        modifier = modifier,
+        modifier = modifier
+            .width(OutlinedTextFieldDefaults.MinWidth)
+            .background(if (wasAutofilled) MaterialTheme.colorScheme.surfaceVariant else Color.Transparent)
+            .onAutofill(
+                LocalAutofillTree.current,
+                LocalAutofill.current,
+                persistentListOf(AutofillType.Password),
+            ) {
+                onValueChange(it)
+                wasAutofilled = true
+            },
         value = password,
         onValueChange = onValueChange,
         singleLine = true,
@@ -95,7 +120,54 @@ fun PasswordField(
     )
 }
 
-@OptIn(ExperimentalComposeUiApi::class, ExperimentalMaterial3Api::class)
+@Composable
+fun InstancePicker(expanded: Boolean, setExpanded: ((Boolean) -> Unit), instance: String, setInstance: ((String) -> Unit)) {
+    ExposedDropdownMenuBox(
+        expanded = expanded,
+        onExpandedChange = {
+            setExpanded(!expanded)
+        },
+    ) {
+        OutlinedTextField(
+            modifier = Modifier
+                .menuAnchor()
+                .width(OutlinedTextFieldDefaults.MinWidth),
+            label = { Text(stringResource(R.string.login_instance)) },
+            placeholder = { Text(stringResource(R.string.login_instance_placeholder)) },
+            value = instance,
+            singleLine = true,
+            onValueChange = setInstance,
+            trailingIcon = {
+                TrailingIcon(expanded = expanded)
+            },
+            keyboardOptions = KeyboardOptions(autoCorrect = false, keyboardType = KeyboardType.Uri),
+        )
+        val filteringOptions = DEFAULT_LEMMY_INSTANCES.filter { it.contains(instance, ignoreCase = true) }
+        if (filteringOptions.isNotEmpty()) {
+            DropdownMenu(
+                expanded = expanded,
+                onDismissRequest = { setExpanded(false) },
+                properties = PopupProperties(focusable = false),
+                modifier = Modifier.exposedDropdownSize(true),
+            ) {
+                filteringOptions.forEach { selectionOption ->
+                    DropdownMenuItem(
+                        modifier = Modifier.exposedDropdownSize(),
+                        text = {
+                            Text(text = selectionOption)
+                        },
+                        onClick = {
+                            setInstance(selectionOption)
+                            setExpanded(false)
+                        },
+                    )
+                }
+            }
+        }
+    }
+}
+
+@OptIn(ExperimentalComposeUiApi::class)
 @Composable
 fun LoginForm(
     modifier: Modifier = Modifier,
@@ -106,9 +178,7 @@ fun LoginForm(
     var username by rememberSaveable { mutableStateOf("") }
     var password by rememberSaveable { mutableStateOf("") }
     var totp by rememberSaveable { mutableStateOf("") }
-    val instanceOptions = DEFAULT_LEMMY_INSTANCES
     var expanded by remember { mutableStateOf(false) }
-    var wasAutofilled by remember { mutableStateOf(false) }
 
     val isValid =
         instance.isNotEmpty() && username.isNotEmpty() && password.isNotEmpty()
@@ -126,92 +196,34 @@ fun LoginForm(
         verticalArrangement = Arrangement.Center,
         horizontalAlignment = Alignment.CenterHorizontally,
     ) {
-        ExposedDropdownMenuBox(
-            expanded = expanded,
-            onExpandedChange = {
-                expanded = !expanded
-            },
-        ) {
-            OutlinedTextField(
-                modifier = Modifier
-                    .menuAnchor()
-                    .width(OutlinedTextFieldDefaults.MinWidth),
-                label = { Text(stringResource(R.string.login_instance)) },
-                placeholder = { Text(stringResource(R.string.login_instance_placeholder)) },
-                value = instance,
-                singleLine = true,
-                onValueChange = { instance = it },
-                trailingIcon = {
-                    TrailingIcon(expanded = expanded)
-                },
-                keyboardOptions = KeyboardOptions(autoCorrect = false, keyboardType = KeyboardType.Uri),
-            )
-            val filteringOptions = instanceOptions.filter { it.contains(instance, ignoreCase = true) }
-            if (filteringOptions.isNotEmpty()) {
-                DropdownMenu(
-                    expanded = expanded,
-                    onDismissRequest = {},
-                    properties = PopupProperties(focusable = false),
-                    modifier = Modifier.exposedDropdownSize(true),
-                ) {
-                    filteringOptions.forEach { selectionOption ->
-                        DropdownMenuItem(
-                            modifier = Modifier.exposedDropdownSize(),
-                            text = {
-                                Text(text = selectionOption)
-                            },
-                            onClick = {
-                                instance = selectionOption
-                                expanded = false
-                            },
-                        )
-                    }
-                }
-            }
-        }
+        InstancePicker(expanded = expanded, { expanded = it }, instance, { instance = it })
 
         MyTextField(
-            modifier = Modifier
-                .width(OutlinedTextFieldDefaults.MinWidth)
-                .background(if (wasAutofilled) MaterialTheme.colorScheme.surfaceVariant else Color.Transparent)
-                .onAutofill(AutofillType.Username, AutofillType.EmailAddress) {
-                    username = it
-                    wasAutofilled = true
-                },
             label = stringResource(R.string.login_email_or_username),
             text = username,
             onValueChange = { username = it },
+            autofillTypes = persistentListOf(AutofillType.Username, AutofillType.EmailAddress),
         )
         PasswordField(
-            modifier = Modifier
-                .width(OutlinedTextFieldDefaults.MinWidth)
-                .background(if (wasAutofilled) MaterialTheme.colorScheme.surfaceVariant else Color.Transparent)
-                .onAutofill(AutofillType.Password) {
-                    password = it
-                    wasAutofilled = true
-                },
             password = password,
             onValueChange = { password = it },
         )
         MyTextField(
-            modifier = Modifier
-                .width(OutlinedTextFieldDefaults.MinWidth)
-                .background(if (wasAutofilled) MaterialTheme.colorScheme.surfaceVariant else Color.Transparent)
-                .onAutofill(AutofillType.SmsOtpCode) {
-                    totp = it
-                    wasAutofilled = true
-                },
             label = stringResource(R.string.login_totp),
             text = totp,
             onValueChange = { totp = it },
+            autofillTypes = persistentListOf(AutofillType.SmsOtpCode),
         )
         Button(
             enabled = isValid && !loading,
             onClick = { onClickLogin(form, instance) },
             modifier = Modifier.padding(top = 10.dp),
         ) {
             if (loading) {
-                CircularProgressIndicator(modifier = Modifier.size(LocalTextStyle.current.fontSize.value.dp))
+                CircularProgressIndicator(
+                    modifier = Modifier.size(LocalTextStyle.current.fontSize.value.dp),
+                    strokeWidth = 2.dp,
+                )
             } else {
                 Text(stringResource(R.string.login_login))
             }