TIQR-369: Fix button behind keyboard, and do not collapse title

Tiqr · Jan 12, 2024 · c668bb6 · c668bb6
1 parent 638d37d
commit c668bb6
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 37 deletions.
diff --git a/app/src/main/kotlin/nl/eduid/screens/recovery/requestsms/PhoneRequestCodeScreen.kt b/app/src/main/kotlin/nl/eduid/screens/recovery/requestsms/PhoneRequestCodeScreen.kt
@@ -23,16 +23,13 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.focus.FocusRequester
-import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalLifecycleOwner
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
@@ -42,7 +39,6 @@ import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.flowWithLifecycle
-import kotlinx.coroutines.android.awaitFrame
 import kotlinx.coroutines.flow.distinctUntilChanged
 import kotlinx.coroutines.flow.filter
 import nl.eduid.R
@@ -97,9 +93,7 @@ fun PhoneRequestCodeScreen(
 }
 
 @Composable
-@OptIn(
-    ExperimentalMaterial3Api::class, ExperimentalComposeUiApi::class,
-)
+@OptIn(ExperimentalComposeUiApi::class)
 private fun PhoneRequestCodeContent(
     uiState: UiState,
     padding: PaddingValues = PaddingValues(),
@@ -118,23 +112,25 @@ private fun PhoneRequestCodeContent(
             .fillMaxWidth()
     ) {
         val keyboardController = LocalSoftwareKeyboardController.current
-        val focusRequester = remember { FocusRequester() }
         val isKeyboardOpen by keyboardAsState()
 
+        Text(
+            text = stringResource(R.string.Recovery_PhoneNumber_COPY),
+            style = MaterialTheme.typography.titleLarge,
+            modifier = Modifier.fillMaxWidth()
+        )
+        Spacer(
+            modifier = Modifier.height(16.dp)
+        )
+
         AnimatedVisibility(
             !isKeyboardOpen, Modifier.fillMaxWidth()
         ) {
             Column(modifier = Modifier.fillMaxWidth()) {
-                Text(
-                    text = stringResource(R.string.Recovery_PhoneNumber_COPY),
-                    style = MaterialTheme.typography.titleLarge,
-                    modifier = Modifier.fillMaxWidth()
-                )
 
                 Spacer(
-                    modifier = Modifier.height(24.dp)
+                    modifier = Modifier.height(8.dp)
                 )
-
                 Text(
                     text = stringResource(R.string.Recovery_Info_COPY),
                     style = MaterialTheme.typography.bodyLarge,
@@ -165,23 +161,18 @@ private fun PhoneRequestCodeContent(
             onValueChange = onValueChange,
             modifier = Modifier
                 .fillMaxWidth()
-                .focusRequester(focusRequester)
                 .requiredHeight(TextFieldDefaults.MinHeight)
         )
-        LaunchedEffect(focusRequester) {
-            awaitFrame()
-            focusRequester.requestFocus()
-        }
     }
     PrimaryButton(
         text = stringResource(R.string.Profile_Verify_COPY),
         onClick = onClick,
         enabled = uiState.input.isNotEmpty(),
         modifier = Modifier
             .fillMaxWidth()
-            .imePadding()
+            .padding(bottom = 24.dp)
             .navigationBarsPadding()
-            .padding(bottom = 24.dp),
+            .imePadding(),
     )
 }
 

diff --git a/app/src/main/kotlin/nl/eduid/ui/Ime.kt b/app/src/main/kotlin/nl/eduid/ui/Ime.kt
@@ -1,24 +1,15 @@
 package nl.eduid.ui
 
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.isImeVisible
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.State
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.ui.platform.LocalView
-import androidx.core.view.ViewCompat
-import androidx.core.view.WindowInsetsCompat
+import androidx.compose.runtime.rememberUpdatedState
 
+@OptIn(ExperimentalLayoutApi::class)
 @Composable
 fun keyboardAsState(): State<Boolean> {
-    val keyboardState = remember { mutableStateOf(false) }
-    val view = LocalView.current
-    LaunchedEffect(view) {
-        ViewCompat.setOnApplyWindowInsetsListener(view) { _, insets ->
-            keyboardState.value = insets.isVisible(WindowInsetsCompat.Type.ime())
-            insets
-        }
-    }
-    return keyboardState
+    return rememberUpdatedState(WindowInsets.isImeVisible)
 }