From 145708ac3539b978bdd8494590bcd9d1b8669fc1 Mon Sep 17 00:00:00 2001
From: Karan Sharma <55722391+ksharma-xyz@users.noreply.github.com>
Date: Sun, 29 Sep 2024 21:14:52 +1000
Subject: [PATCH] UI: TextField Fix the cursor

Cursor always displayed at the start of Placeholder
Cursor dislayed as soon as the field is focused.
---
 .../design/system/components/TextField.kt     | 44 ++++++++++++++++---
 1 file changed, 38 insertions(+), 6 deletions(-)

diff --git a/core/design-system/src/main/kotlin/xyz/ksharma/krail/design/system/components/TextField.kt b/core/design-system/src/main/kotlin/xyz/ksharma/krail/design/system/components/TextField.kt
index 1ea85f9b..35a54059 100644
--- a/core/design-system/src/main/kotlin/xyz/ksharma/krail/design/system/components/TextField.kt
+++ b/core/design-system/src/main/kotlin/xyz/ksharma/krail/design/system/components/TextField.kt
@@ -1,7 +1,11 @@
 package xyz.ksharma.krail.design.system.components
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsFocusedAsState
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -16,6 +20,8 @@ import androidx.compose.foundation.text.selection.LocalTextSelectionColors
 import androidx.compose.foundation.text.selection.TextSelectionColors
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.SolidColor
@@ -43,7 +49,11 @@ fun TextField(
     readOnly: Boolean = false,
     imeAction: ImeAction = ImeAction.Default,
 ) {
+    val interactionSource = remember { MutableInteractionSource() }
+    val isFocused by interactionSource.collectIsFocusedAsState()
+
     val textFieldState = rememberTextFieldState()
+
     val textSelectionColors = TextSelectionColors(
         handleColor = KrailTheme.colors.tertiary,
         backgroundColor = KrailTheme.colors.tertiary.copy(alpha = 0.4f)
@@ -71,6 +81,7 @@ fun TextField(
             ),
             lineLimits = TextFieldLineLimits.SingleLine,
             readOnly = readOnly,
+            interactionSource = interactionSource,
             cursorBrush = SolidColor(KrailTheme.colors.onSecondaryContainer),
             decorator = { innerTextField ->
                 Row(
@@ -80,9 +91,23 @@ fun TextField(
                             color = KrailTheme.colors.secondaryContainer
                         )
                         .padding(horizontal = 12.dp, vertical = 4.dp),
+                    horizontalArrangement = Arrangement.Start,
                     verticalAlignment = Alignment.CenterVertically,
                 ) {
-                    if (textFieldState.text.isEmpty()) {
+                    if (textFieldState.text.isEmpty() && isFocused) {
+                        /* Using a Box ensures that cursor and placeholder are displayed on top of
+                         each other, so the cursor is always displayed at the start if the TextField.
+                         */
+                        Box {
+                            innerTextField() // To display cursor
+                            Text(
+                                text = placeholder.orEmpty(),
+                                style = LocalTextStyle.current,
+                                color = LocalTextColor.current,
+                                maxLines = 1,
+                            )
+                        }
+                    } else if (textFieldState.text.isEmpty()) {
                         Text(
                             text = placeholder.orEmpty(),
                             style = LocalTextStyle.current,
@@ -90,10 +115,8 @@ fun TextField(
                             maxLines = 1,
                         )
                     } else {
-
-                        // add leading icon here
+                        // add leading icon here - todo
                         innerTextField()
-
                         // add trailing icon here / Clear - todo
                     }
                 }
@@ -113,9 +136,18 @@ private fun DvTextFieldEnabledPreview() {
                 .fillMaxSize()
                 .background(color = KrailTheme.colors.secondary)
                 .padding(16.dp),
-            contentAlignment = Alignment.Center,
+            contentAlignment = Alignment.TopCenter,
         ) {
-            TextField(placeholder = "Station")
+            Column {
+                TextField(placeholder = "Station")
+                androidx.compose.material3.TextField(
+                    modifier = Modifier.padding(top = 24.dp),
+                    value = "",
+                    onValueChange = {},
+                    placeholder = {
+                        Text(text = "aa")
+                    })
+            }
         }
     }
 }