Use TextFieldValue instead to set and manage cursor position

Author: LZRS

datacapture/src/main/java/com/google/android/fhir/datacapture/views/compose/DatePickerItem.kt

@@ -45,8 +45,14 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.error
 import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.text.TextRange
+import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.input.OffsetMapping
+import androidx.compose.ui.text.input.TextFieldValue
+import androidx.compose.ui.text.input.TransformedText
+import androidx.compose.ui.text.input.VisualTransformation
 import com.google.android.fhir.datacapture.R
 import com.google.android.fhir.datacapture.extensions.format
 import com.google.android.fhir.datacapture.extensions.toLocalDate
@@ -70,7 +76,15 @@ internal fun DatePickerItem(
   val focusManager = LocalFocusManager.current
   val keyboardController = LocalSoftwareKeyboardController.current
   var dateInputState by remember(dateInput) { mutableStateOf(dateInput) }
-  val dateInputDisplay by remember(dateInputState) { derivedStateOf { dateInputState.display } }
+  val dateInputDisplay by
+    remember(dateInputState) {
+      derivedStateOf {
+        TextFieldValue(
+          text = dateInputState.display,
+          selection = TextRange(dateInputFormat.patternWithDelimiters.length),
+        )
+      }
+    }
 
   var showDatePickerModal by remember { mutableStateOf(false) }
 
@@ -83,11 +97,12 @@ internal fun DatePickerItem(
   OutlinedTextField(
     value = dateInputDisplay,
     onValueChange = {
+      val text = it.text
       if (
-        it.length <= dateInputFormat.patternWithoutDelimiters.length &&
-          it.all { char -> char.isDigit() }
+        text.length <= dateInputFormat.patternWithoutDelimiters.length &&
+          text.all { char -> char.isDigit() }
       ) {
-        val trimmedText = it.trim()
+        val trimmedText = text.trim()
         val localDate =
           if (
             trimmedText.isNotBlank() &&
@@ -97,7 +112,7 @@ internal fun DatePickerItem(
           } else {
             null
           }
-        dateInputState = DateInput(it, localDate)
+        dateInputState = DateInput(text, localDate)
       }
     },
     singleLine = true,
@@ -132,7 +147,25 @@ internal fun DatePickerItem(
       KeyboardActions(
         onNext = { focusManager.moveFocus(FocusDirection.Down) },
       ),
-    visualTransformation = DateVisualTransformation(dateInputFormat),
+    visualTransformation =
+      if (!dateInputFormat.delimiterExistsInPattern) {
+        VisualTransformation.None
+      } else {
+        VisualTransformation { originalText ->
+          val text = buildAnnotatedString {
+            originalText.forEachIndexed { index, ch ->
+              append(ch)
+              if (
+                index + 1 == dateInputFormat.delimiterFirstIndex ||
+                  index + 2 == dateInputFormat.delimiterLastIndex
+              ) {
+                append(dateInputFormat.delimiter)
+              }
+            }
+          }
+          TransformedText(text, dateInputFormat.offsetMapping)
+        }
+      },
   )
 
   if (selectableDates != null && showDatePickerModal) {
@@ -197,4 +230,35 @@ typealias DateFormatPattern = String
 
 data class DateInput(val display: String, val value: LocalDate?)
 
+data class DateInputFormat(val patternWithDelimiters: String, val delimiter: Char) {
+  val patternWithoutDelimiters: String = patternWithDelimiters.replace(delimiter.toString(), "")
+
+  val delimiterFirstIndex: Int = patternWithDelimiters.indexOf(delimiter)
+  val delimiterLastIndex: Int = patternWithDelimiters.lastIndexOf(delimiter)
+  val delimiterExistsInPattern = delimiterFirstIndex != -1 && delimiterLastIndex != -1
+
+  val offsetMapping =
+    object : OffsetMapping {
+      override fun originalToTransformed(offset: Int): Int {
+        return when {
+          delimiterExistsInPattern &&
+            offset >= delimiterLastIndex &&
+            delimiterLastIndex > delimiterFirstIndex -> offset + 2
+          delimiterExistsInPattern && offset >= delimiterFirstIndex -> offset + 1
+          else -> offset
+        }
+      }
+
+      override fun transformedToOriginal(offset: Int): Int {
+        return when {
+          delimiterExistsInPattern &&
+            offset >= delimiterLastIndex &&
+            offset > delimiterFirstIndex -> offset - 2
+          delimiterExistsInPattern && offset >= delimiterFirstIndex -> offset - 1
+          else -> offset
+        }
+      }
+    }
+}
+
 const val DATE_TEXT_INPUT_FIELD = "date_picker_text_field"

datacapture/src/main/java/com/google/android/fhir/datacapture/views/compose/DateVisualTransformation.kt

@@ -16,6 +16,7 @@
 
 package com.google.android.fhir.datacapture.views.compose
 
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.ExperimentalMaterial3Api
@@ -69,6 +70,7 @@ internal fun TimePickerItem(
   var expanded by remember { mutableStateOf(false) }
 
   ExposedDropdownMenuBox(
+    modifier = modifier,
     expanded = expanded,
     onExpandedChange = {
       if (it) {
@@ -83,7 +85,7 @@ internal fun TimePickerItem(
       singleLine = true,
       label = { Text(hint) },
       modifier =
-        modifier
+        Modifier.fillMaxWidth()
           .menuAnchor(ExposedDropdownMenuAnchorType.PrimaryNotEditable, enabled)
           .testTag(TIME_PICKER_INPUT_FIELD)
           .onFocusChanged {