ux: improve IME actions for text fields with FocusRequestor

Author: shubham0204

app/src/main/java/io/shubham0204/smollmandroid/ui/screens/manage_tasks/CreateTaskDialog.kt

@@ -43,9 +43,10 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.focus.FocusDirection
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardCapitalization
@@ -64,7 +65,8 @@ fun CreateTaskDialog(viewModel: TasksViewModel) {
     var selectedModel by remember { mutableStateOf<LLMModel?>(null) }
     var isModelListDialogVisible by remember { mutableStateOf(false) }
     val modelsList = viewModel.modelsRepository.getAvailableModelsList()
-    val focusManager = LocalFocusManager.current
+    val (focusRequestor) = FocusRequester.createRefs()
+    val keyboardController = LocalSoftwareKeyboardController.current
     LaunchedEffect(showCreateTaskDialog) {
         taskName = ""
         systemPrompt = ""
@@ -92,7 +94,7 @@ fun CreateTaskDialog(viewModel: TasksViewModel) {
                     )
                     Spacer(modifier = Modifier.height(16.dp))
                     TextField(
-                        modifier = Modifier.fillMaxWidth(),
+                        modifier = Modifier.fillMaxWidth().padding(bottom = 8.dp),
                         value = taskName,
                         onValueChange = { taskName = it },
                         label = { Text(stringResource(R.string.task_create_task_name)) },
@@ -104,32 +106,29 @@ fun CreateTaskDialog(viewModel: TasksViewModel) {
                         keyboardActions =
                             KeyboardActions(
                                 onNext = {
-                                    focusManager.moveFocus(FocusDirection.Down)
+                                    focusRequestor.requestFocus()
                                 },
                             ),
                     )
-                    Spacer(modifier = Modifier.height(8.dp))
 
                     TextField(
-                        modifier = Modifier.fillMaxWidth(),
+                        modifier = Modifier.fillMaxWidth().padding(bottom = 16.dp).focusRequester(focusRequestor),
                         value = systemPrompt,
                         onValueChange = { systemPrompt = it },
                         label = { Text(stringResource(R.string.task_create_task_sys_prompt)) },
                         keyboardOptions =
                             KeyboardOptions.Default.copy(
                                 capitalization = KeyboardCapitalization.Sentences,
-                                imeAction = ImeAction.Next,
+                                imeAction = ImeAction.Done,
                             ),
                         keyboardActions =
                             KeyboardActions(
-                                onNext = {
-                                    focusManager.moveFocus(FocusDirection.Down)
+                                onDone = {
+                                    keyboardController?.hide()
                                 },
                             ),
                     )
 
-                    Spacer(modifier = Modifier.height(16.dp))
-
                     Text(
                         modifier =
                             Modifier

app/src/main/java/io/shubham0204/smollmandroid/ui/screens/manage_tasks/EditTaskDialog.kt

@@ -43,9 +43,10 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.focus.FocusDirection
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardCapitalization
@@ -66,7 +67,8 @@ fun EditTaskDialog(viewModel: TasksViewModel) {
         }
         var isModelListDialogVisible by remember { mutableStateOf(false) }
         val modelsList = viewModel.modelsRepository.getAvailableModelsList()
-        val focusManager = LocalFocusManager.current
+        val (focusRequestor) = FocusRequester.createRefs()
+        val keyboardController = LocalSoftwareKeyboardController.current
         LaunchedEffect(selectedTask) {
             taskName = task.name
             systemPrompt = task.systemPrompt
@@ -94,7 +96,7 @@ fun EditTaskDialog(viewModel: TasksViewModel) {
                         )
                         Spacer(modifier = Modifier.height(16.dp))
                         TextField(
-                            modifier = Modifier.fillMaxWidth(),
+                            modifier = Modifier.fillMaxWidth().padding(bottom = 8.dp),
                             value = taskName,
                             onValueChange = { taskName = it },
                             label = { Text(stringResource(R.string.task_create_task_name)) },
@@ -106,26 +108,25 @@ fun EditTaskDialog(viewModel: TasksViewModel) {
                             keyboardActions =
                                 KeyboardActions(
                                     onNext = {
-                                        focusManager.moveFocus(FocusDirection.Down)
+                                        focusRequestor.requestFocus()
                                     },
                                 ),
                         )
-                        Spacer(modifier = Modifier.height(8.dp))
 
                         TextField(
-                            modifier = Modifier.fillMaxWidth(),
+                            modifier = Modifier.fillMaxWidth().padding(bottom = 16.dp).focusRequester(focusRequestor),
                             value = systemPrompt,
                             onValueChange = { systemPrompt = it },
                             label = { Text(stringResource(R.string.task_create_task_sys_prompt)) },
                             keyboardOptions =
                                 KeyboardOptions.Default.copy(
                                     capitalization = KeyboardCapitalization.Sentences,
-                                    imeAction = ImeAction.Next,
+                                    imeAction = ImeAction.Done,
                                 ),
                             keyboardActions =
                                 KeyboardActions(
-                                    onNext = {
-                                        focusManager.moveFocus(FocusDirection.Down)
+                                    onDone = {
+                                        keyboardController?.hide()
                                     },
                                 ),
                         )