From f8a5665ffa08b039cc245b148bca113b6403fae6 Mon Sep 17 00:00:00 2001 From: Sanjay P Date: Sat, 30 Sep 2023 12:27:10 +0530 Subject: [PATCH] TP-00000 | Fixed Input Keyboard Flickering Issue (#201) --- .../ui/SearchAndFilterToolBar.kt | 18 +++++++++++++++--- .../dazzledesignsystem/ui/WidgetItemView.kt | 11 ++++++++++- .../designsystem/ui/DesignSystemRepoScreen.kt | 11 ++++++++++- .../uitron/render/CustomTextFieldRenderer.kt | 12 +++++++++++- .../render/MultiSectionTextFieldRenderer.kt | 12 +++++++++++- .../com/navi/uitron/render/OtpBoxRenderer.kt | 11 ++++++++++- .../uitron/render/OutlinedTextFieldRenderer.kt | 12 +++++++++++- .../java/com/navi/uitron/utils/KeyboardUtil.kt | 15 +++++++++++++++ 8 files changed, 93 insertions(+), 9 deletions(-) diff --git a/app/src/main/java/com/uitron/demo/dazzledesignsystem/ui/SearchAndFilterToolBar.kt b/app/src/main/java/com/uitron/demo/dazzledesignsystem/ui/SearchAndFilterToolBar.kt index 6c54ca9..c8415c3 100644 --- a/app/src/main/java/com/uitron/demo/dazzledesignsystem/ui/SearchAndFilterToolBar.kt +++ b/app/src/main/java/com/uitron/demo/dazzledesignsystem/ui/SearchAndFilterToolBar.kt @@ -22,7 +22,9 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.ExperimentalComposeUiApi import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color +import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalSoftwareKeyboardController +import androidx.compose.ui.platform.LocalView import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.TextStyle @@ -44,7 +46,9 @@ import com.uitron.demo.theme.fontFamily fun Toolbar(viewModel: DazzleViewModel) { val keyboardController = LocalSoftwareKeyboardController.current - + val context = LocalContext.current + val view = LocalView.current + Row( verticalAlignment = Alignment.CenterVertically, modifier = Modifier @@ -74,7 +78,11 @@ fun Toolbar(viewModel: DazzleViewModel) { ), keyboardActions = KeyboardActions(onSearch = { viewModel.applySearchOrFilter() - keyboardController?.hide() + KeyboardUtil.hideKeyboard( + context = context, + view = view, + keyBoardController = keyboardController + ) }), modifier = Modifier .height(48.dp) @@ -97,7 +105,11 @@ fun Toolbar(viewModel: DazzleViewModel) { }) Button( onClick = { - keyboardController?.hide() + KeyboardUtil.hideKeyboard( + context = context, + view = view, + keyBoardController = keyboardController + ) viewModel.showBottomSheet(BottomSheetType.FilterBottomSheet) }, shape = RoundedCornerShape(4.dp), colors = ButtonDefaults.buttonColors( diff --git a/app/src/main/java/com/uitron/demo/dazzledesignsystem/ui/WidgetItemView.kt b/app/src/main/java/com/uitron/demo/dazzledesignsystem/ui/WidgetItemView.kt index 14091fa..400555d 100644 --- a/app/src/main/java/com/uitron/demo/dazzledesignsystem/ui/WidgetItemView.kt +++ b/app/src/main/java/com/uitron/demo/dazzledesignsystem/ui/WidgetItemView.kt @@ -1,5 +1,6 @@ package com.uitron.demo.dazzledesignsystem.ui +import KeyboardUtil import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.clickable @@ -18,7 +19,9 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.ExperimentalComposeUiApi import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color +import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalSoftwareKeyboardController +import androidx.compose.ui.platform.LocalView import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp @@ -41,6 +44,8 @@ import com.uitron.demo.theme.fontFamily fun WidgetItemView(widgetTemplate: WidgetTemplate?, viewModel: DazzleViewModel) { val keyboardController = LocalSoftwareKeyboardController.current + val context = LocalContext.current + val view = LocalView.current val widgetData = widgetTemplate?.config?.widgetData?.let { try { @@ -79,7 +84,11 @@ fun WidgetItemView(widgetTemplate: WidgetTemplate?, viewModel: DazzleViewModel) modifier = Modifier .padding(top = 10.dp, end = 12.dp) .clickable { - keyboardController?.hide() + KeyboardUtil.hideKeyboard( + context = context, + view = view, + keyBoardController = keyboardController + ) viewModel.showBottomSheet( BottomSheetType.ShareWidgetConfigBottomSheet, widgetTemplate ) diff --git a/app/src/main/java/com/uitron/demo/designsystem/ui/DesignSystemRepoScreen.kt b/app/src/main/java/com/uitron/demo/designsystem/ui/DesignSystemRepoScreen.kt index a2f3adf..d3bce01 100644 --- a/app/src/main/java/com/uitron/demo/designsystem/ui/DesignSystemRepoScreen.kt +++ b/app/src/main/java/com/uitron/demo/designsystem/ui/DesignSystemRepoScreen.kt @@ -16,6 +16,7 @@ import androidx.compose.ui.platform.ClipboardManager import androidx.compose.ui.platform.LocalClipboardManager import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalSoftwareKeyboardController +import androidx.compose.ui.platform.LocalView import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.AnnotatedString import androidx.compose.ui.text.TextStyle @@ -75,6 +76,8 @@ fun SearchField( modifier: Modifier, viewModel: DesignSystemVM ) { val keyboardController = LocalSoftwareKeyboardController.current + val context = LocalContext.current + val view = LocalView.current Row( verticalAlignment = Alignment.CenterVertically, modifier = modifier @@ -108,7 +111,13 @@ fun SearchField( keyboardOptions = KeyboardOptions( autoCorrect = false, imeAction = ImeAction.Search ), - keyboardActions = KeyboardActions(onSearch = { keyboardController?.hide() }), + keyboardActions = KeyboardActions(onSearch = { + KeyboardUtil.hideKeyboard( + context = context, + view = view, + keyBoardController = keyboardController + ) + }), modifier = Modifier .fillMaxWidth() .background(color = Color.Transparent), diff --git a/navi-uitron/src/main/java/com/navi/uitron/render/CustomTextFieldRenderer.kt b/navi-uitron/src/main/java/com/navi/uitron/render/CustomTextFieldRenderer.kt index 3f7fcfe..c9633f4 100644 --- a/navi-uitron/src/main/java/com/navi/uitron/render/CustomTextFieldRenderer.kt +++ b/navi-uitron/src/main/java/com/navi/uitron/render/CustomTextFieldRenderer.kt @@ -17,8 +17,10 @@ import androidx.compose.ui.focus.onFocusChanged import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.layout.layoutId +import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalFocusManager import androidx.compose.ui.platform.LocalSoftwareKeyboardController +import androidx.compose.ui.platform.LocalView import androidx.compose.ui.text.* import androidx.compose.ui.text.input.VisualTransformation import androidx.compose.ui.unit.dp @@ -70,6 +72,8 @@ class CustomTextFieldRenderer( ) { super.Render(property, uiTronData, uiTronViewModel, modifier) var customTextFieldData = uiTronData as? CustomTextFieldData + val context = LocalContext.current + val view = LocalView.current if (property.isStateFul.orFalse()) { val state = uiTronViewModel.handle.getStateFlow( property.getPropertyId(), @@ -219,7 +223,13 @@ class CustomTextFieldRenderer( imeAction = KeyboardUtil.getImeAction(property.keyboardOptions?.imeAction) ), keyboardActions = KeyboardActions( - onDone = { keyboardController?.hide() } + onDone = { + KeyboardUtil.hideKeyboard( + context = context, + view = view, + keyBoardController = keyboardController + ) + } ), value = inputValue, onValueChange = { input -> diff --git a/navi-uitron/src/main/java/com/navi/uitron/render/MultiSectionTextFieldRenderer.kt b/navi-uitron/src/main/java/com/navi/uitron/render/MultiSectionTextFieldRenderer.kt index 0f74030..8ce3bfb 100644 --- a/navi-uitron/src/main/java/com/navi/uitron/render/MultiSectionTextFieldRenderer.kt +++ b/navi-uitron/src/main/java/com/navi/uitron/render/MultiSectionTextFieldRenderer.kt @@ -16,7 +16,9 @@ import androidx.compose.ui.focus.focusRequester import androidx.compose.ui.focus.onFocusChanged import androidx.compose.ui.input.key.* import androidx.compose.ui.layout.layoutId +import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalSoftwareKeyboardController +import androidx.compose.ui.platform.LocalView import androidx.compose.ui.text.TextRange import androidx.compose.ui.text.input.TextFieldValue import androidx.compose.ui.text.input.VisualTransformation @@ -62,6 +64,8 @@ class MultiSectionTextFieldRenderer() : Renderer ) { super.Render(property, uiTronData, uiTronViewModel, modifier) var multiSectionTextFieldData = uiTronData as? MultiSectionTextFieldData + val context = LocalContext.current + val view = LocalView.current if (property.isStateFul.orFalse()) { val state = uiTronViewModel.handle.getStateFlow( property.getPropertyId(), null @@ -255,7 +259,13 @@ class MultiSectionTextFieldRenderer() : Renderer }, keyboardOptions = getKeyboardOptions(property.textFieldPropertyList[index].keyboardOptions), keyboardActions = KeyboardActions( - onDone = { keyboardController?.hide() } + onDone = { + KeyboardUtil.hideKeyboard( + context = context, + view = view, + keyBoardController = keyboardController + ) + } ), decorationBox = { innerTextField -> RenderHint( diff --git a/navi-uitron/src/main/java/com/navi/uitron/render/OtpBoxRenderer.kt b/navi-uitron/src/main/java/com/navi/uitron/render/OtpBoxRenderer.kt index 3d19728..0db573d 100644 --- a/navi-uitron/src/main/java/com/navi/uitron/render/OtpBoxRenderer.kt +++ b/navi-uitron/src/main/java/com/navi/uitron/render/OtpBoxRenderer.kt @@ -35,8 +35,10 @@ import androidx.compose.ui.graphics.Color.Companion.Transparent import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.layout.layoutId import androidx.compose.ui.platform.LocalConfiguration +import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalFocusManager import androidx.compose.ui.platform.LocalSoftwareKeyboardController +import androidx.compose.ui.platform.LocalView import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.input.VisualTransformation import androidx.compose.ui.text.style.TextAlign @@ -268,6 +270,8 @@ class OtpBoxRenderer : Renderer { modifier: Modifier, onValueChange: (value: TextFieldValue) -> Unit ) { + val context = LocalContext.current + val view = LocalView.current Row( modifier = Modifier .width(getItemWidth(property)) @@ -317,7 +321,12 @@ class OtpBoxRenderer : Renderer { imeAction = KeyboardUtil.getImeAction(property.keyboardOptions?.imeAction) ), keyboardActions = KeyboardActions( - onDone = { keyboardController?.hide() } + onDone = { + KeyboardUtil.hideKeyboard( + context = context, + view = view, + keyBoardController = keyboardController + ) } ), visualTransformation = property.visualTransformation?.getVisualTransformation() ?: VisualTransformation.None, diff --git a/navi-uitron/src/main/java/com/navi/uitron/render/OutlinedTextFieldRenderer.kt b/navi-uitron/src/main/java/com/navi/uitron/render/OutlinedTextFieldRenderer.kt index 231a0af..83babc2 100644 --- a/navi-uitron/src/main/java/com/navi/uitron/render/OutlinedTextFieldRenderer.kt +++ b/navi-uitron/src/main/java/com/navi/uitron/render/OutlinedTextFieldRenderer.kt @@ -20,7 +20,9 @@ import androidx.compose.ui.draw.alpha import androidx.compose.ui.focus.onFocusChanged import androidx.compose.ui.graphics.Color import androidx.compose.ui.layout.layoutId +import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalSoftwareKeyboardController +import androidx.compose.ui.platform.LocalView import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.input.VisualTransformation import androidx.compose.ui.unit.dp @@ -58,6 +60,8 @@ class OutlinedTextFieldRenderer( ) { super.Render(property, uiTronData, uiTronViewModel, modifier) var outlinedTextFieldData = uiTronData as? OutlinedTextFieldData + val context = LocalContext.current + val view = LocalView.current if (property.isStateFul.orFalse()) { val state = uiTronViewModel.handle.getStateFlow( property.getPropertyId(), @@ -123,7 +127,13 @@ class OutlinedTextFieldRenderer( imeAction = KeyboardUtil.getImeAction(property.keyboardOptions?.imeAction) ), keyboardActions = KeyboardActions( - onDone = {keyboardController?.hide()} + onDone = { + KeyboardUtil.hideKeyboard( + context = context, + view = view, + keyBoardController = keyboardController + ) + } ), value = inputValue, onValueChange = { diff --git a/navi-uitron/src/main/java/com/navi/uitron/utils/KeyboardUtil.kt b/navi-uitron/src/main/java/com/navi/uitron/utils/KeyboardUtil.kt index d768d3f..5aacbf6 100644 --- a/navi-uitron/src/main/java/com/navi/uitron/utils/KeyboardUtil.kt +++ b/navi-uitron/src/main/java/com/navi/uitron/utils/KeyboardUtil.kt @@ -5,9 +5,14 @@ * */ +import android.content.Context +import android.view.inputmethod.InputMethodManager +import androidx.compose.ui.ExperimentalComposeUiApi +import androidx.compose.ui.platform.SoftwareKeyboardController import androidx.compose.ui.text.input.ImeAction import androidx.compose.ui.text.input.KeyboardCapitalization import androidx.compose.ui.text.input.KeyboardType +import androidx.core.content.getSystemService /** * Copyright © 2021 by Navi Technologies Private Limited @@ -51,4 +56,14 @@ object KeyboardUtil { else -> ImeAction.None } } + + @OptIn(ExperimentalComposeUiApi::class) + fun hideKeyboard( + context: Context, + view: android.view.View, + keyBoardController: SoftwareKeyboardController?, + ) { + context.getSystemService()?.hideSoftInputFromWindow(view.windowToken, 0) + keyBoardController?.hide() + } }