update dialog to dismiss if the ESC key is hit

sunny-chung · Dec 3, 2023 · 3984591 · 3984591
1 parent c648647
commit 3984591
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 2 deletions.
diff --git a/src/jvmMain/kotlin/com/sunnychung/application/multiplatform/hellohttp/ux/AppView.kt b/src/jvmMain/kotlin/com/sunnychung/application/multiplatform/hellohttp/ux/AppView.kt
@@ -18,6 +18,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.sizeIn
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -27,6 +28,13 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.composed
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.input.key.Key
+import androidx.compose.ui.input.key.KeyEventType
+import androidx.compose.ui.input.key.key
+import androidx.compose.ui.input.key.onKeyEvent
+import androidx.compose.ui.input.key.type
 import androidx.compose.ui.platform.LocalClipboardManager
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.text.AnnotatedString
@@ -89,6 +97,7 @@ fun AppView() {
                 AppContentView()
 
                 dialogState?.let { dialog ->
+                    val focusRequester = remember { FocusRequester() }
                     Box(
                         modifier = Modifier
                             .fillMaxSize()
@@ -97,7 +106,7 @@ fun AppView() {
                                 indication = null,
                                 interactionSource = remember { MutableInteractionSource() }
                             ) {
-                                dialogViewModel.updateState(null)
+                                dialogViewModel.updateState(null) // close the dialog
                             }
                     )
                     Box(
@@ -110,12 +119,26 @@ fun AppView() {
                             ) {
                                 // no-op
                             }
+                            .onKeyEvent {
+                                log.d { "Dialog key ${it.type} ${it.key}" }
+                                if (it.type == KeyEventType.KeyDown && it.key == Key.Escape) {
+                                    dialogViewModel.updateState(null) // close the dialog
+                                    true
+                                } else {
+                                    false
+                                }
+                            }
+                            .focusRequester(focusRequester)
                             .padding(40.dp)
                             .align(
                                 Alignment.Center
                             )
                             .sizeIn(maxWidth = 480.dp, maxHeight = 300.dp)
                     ) {
+                        LaunchedEffect(Unit) {
+                            focusRequester.requestFocus()
+                        }
+
                         dialog.content()
                         AppImageButton(
                             resource = "close.svg",

diff --git a/...otlin/com/sunnychung/application/multiplatform/hellohttp/ux/SubprojectEditorDialogView.kt b/...otlin/com/sunnychung/application/multiplatform/hellohttp/ux/SubprojectEditorDialogView.kt
@@ -17,13 +17,16 @@ import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 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.FocusRequester
+import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import com.sunnychung.application.multiplatform.hellohttp.AppContext
@@ -51,6 +54,7 @@ fun SubprojectEditorDialogView(
 
     log.d { "SubprojectEditorDialogView recompose" }
 
+    val focusRequester = remember { FocusRequester() }
     var cachedSubproject by rememberLast(subprojectId) { mutableStateOf<Subproject?>(null) }
     val subproject = projectCollectionRepository.subscribeLatestSubproject(
         ProjectAndEnvironmentsDI(), subprojectId
@@ -86,7 +90,7 @@ fun SubprojectEditorDialogView(
                     onSubprojectUpdate()
                 },
                 placeholder = { AppText(text = "Subproject Name", color = colours.placeholder) },
-                modifier = Modifier.weight(1f),
+                modifier = Modifier.weight(1f).focusRequester(focusRequester),
             )
         }
 
@@ -171,6 +175,10 @@ fun SubprojectEditorDialogView(
             }
         }
     }
+
+    LaunchedEffect(Unit) {
+        focusRequester.requestFocus()
+    }
 }
 
 private enum class SubprojectEditorTab(override val key: Any?, override val displayText: String) : DropDownable {