fix(FilterTextField): Fix synchronization issues

If the text of a `TextField` is updated from a flow, this can lead to a
jumping cursor and swallowed characters [1]. For a discussion of the
issue see [2].

Fix this by introducing a local mutable state for the text value as
suggested in [3].

Fixes #109.

[1]: JetBrains/compose-multiplatform#3089
[2]: https://medium.com/androiddevelopers/effective-state-management-for-textfield-in-compose-d6e5b070fbe5
[3]: cashapp/molecule#63 (comment)

Signed-off-by: Martin Nonnenmacher <[email protected]>

Author: mnonnenmacher

src/main/kotlin/composables/FilterTextField.kt

@@ -10,6 +10,10 @@ import androidx.compose.material.Text
 import androidx.compose.material.TextField
 import androidx.compose.material.TextFieldDefaults
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
@@ -26,10 +30,14 @@ fun FilterTextField(
     onFilterChange: (String) -> Unit
 ) {
     val filterIcon = painterResource(icon.resource)
+    var localFilterText by remember(filterText) { mutableStateOf(filterText) }
 
     TextField(
-        value = filterText,
-        onValueChange = onFilterChange,
+        value = localFilterText,
+        onValueChange = {
+            localFilterText = it
+            onFilterChange(it)
+        },
         placeholder = { Text(label) },
         singleLine = true,
         leadingIcon = { Icon(filterIcon, label) },